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

Concurrent AJAX Requests

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.

Thank You!

Questions?