What is AJAX, JSON, and REST?
By Stacy London, January 2013
Best viewed in Chrome
Created with reveal.js by Hakim El Hattab
Use ← → ↑ ↓ keys to navigate. Press ESC to enter the slide overview. Hold down alt and click on any element to zoom in on it using zoom.js. Alt + click anywhere to zoom back out.
HTTP
- Synchronous, text-based protocol for exchanging data over a network
- client (browser) issues request to server and waits for response before doing anything else
AJAX
Asynchronous JavaScript and XML (eXtensible Markup Language)
- a technique to build fast & dynamic web sites / applications
- exchange small amounts of data with the server without reloading the entire page
- E.g. Amazon, Twitter, Google Maps, Gmail, YouTube, Facebook
Components of AJAX
- XMLHttpRequest object (to exchange data asynchronously with a server)
- JavaScript/DOM (to display/interact with the information)
- XML (sometimes used as the format for transferring data)
- JSON (often used as the format for transferring data)
Asynchronous JavaScript
- JS executes call to server and doesn't wait for the response and continues processing
- a handler function deals with the response
XML
<people>
<person>
<firstName>Dwight</firstName>
<lastName>Schrute</lastName>
</person>
<person>
<firstName>Jim</firstName>
<lastName>Halpert</lastName>
</person>
</people>
JSON
JavaScript Object Notation - A lightweight data-interchange format.
{
"people": {
"person": [
{
"firstname": "Dwight",
"lastname": "Schrute"
},
{
"firstname": "Jim",
"lastname": "Halpert"
}
]
}
}
XML vs JSON
It is much easier to write and read JavaScript that deals with JSON than it is XML.
Code Demo
Cross-Browser Compatibility
Not all browsers implement AJAX the same so it's best to use a JavaScript framework to avoid having to code that yourself. e.g. jQuery AJAX
Same-origin Policy
When you use XMLHttpRequest you must call back to the same domain the JavaScript was served from: cross-origin network access.
JSONP
JSON with Padding
- allows for cross domain JSON requests
- does not use XMLHttpRequest object, it is requesting JS code and is evaluated by the JS interpreter, not parsed by a JSON parser
- JSONP is script tag injection, passing the response from the server in to a user specified function
JSONP Concerns
- "a malicious web service could return a function call for the JSON-P portion, but slip in another set of JavaScript logic that hacks the page into sending back private user's data" -json-p.org
- poor error handling - can't get HTTP status codes and fails silently
- not able to catch a 404 error from the server
- you cannot cancel or restart the request like with XMLHttpRequest
- you can, however, timeout after waiting a reasonable amount of time
- there are plugins to help with this
CORS
Cross-Origin Resource Sharing
- solution for modern browsers
- can't send authentication or cookies with the request in IE8
- could be solution for mobile web apps where we know the browser will be modern
- requires server-side configuration to allow requests from certain domains
Server-Side Proxy (Fascade)
- application code running on the server of the same domain
- can call web services that reside in any domain
- can transform XML returned by a SOAP based service into JSON to return to the browser
Fascade Implementations
- JEE Web App - servlet that accepts HttpRequest and responds with an HttpResponse of MIME type "application/json" (you're basically just sending down a string back to the browser to be parsed as JSON)
- ASP.NET - generic web handler (.ashx) that does the exact same thing
REST
Representational State Transfer
- uses nouns and verbs and the emphasis is on readability
- uses less bandwidth since it doesn't require message headers
- does not require XML parsing like SOAP
REST vs. SOAP
- REST uses native HTTP verbs: GET, POST, PUT, DELETE
- SOAP requires defining very specific application methods getUsers(), addNewUser(), modifyUser();
RESTful Web Service
Web Service implemented using HTTP and the principles of REST.
- expose directory structure-like URIs http://example.com/employees/
RESTful Web Service
interact with this resource (clients) with HTTP methods
- To add a new employee use POST
- To get the details for an existing employee use GET
- To change the state or update employee information use PUT
- To remove an employee from the directory use DELETE
Twitter
Twitter is a great example of exposing RESTful Web Services that can be used from any kind of application (native, web)
Single Page Applications (SPA)
RESTful Web Services allow you to implement SPAs and use JavaScript MVC frameworks like backbone.js that work very well with REST.
Combine with CORS to create web apps where HTML/CSS/JS is served from a static web server and calls are made directly to web services to execute business logic and obtain data.