AJAX

Lecture Notes for CS142
Winter Quarter 2009
John Ousterhout

• "Asynchronous Javascript And XML"
• Simple idea:
  • Issue an HTTP request to the server without replacing the current page.
  • Process the response with your own Javascript code.
• Example:

  xhr = new XMLHttpRequest();
  xhr.onreadystatechange = xhrHandler();
  xhr.open("POST", url);
  xhr.send(postData);
  ...
  function xhrHandler() {
    if (this.readyState != 4) {
        return;
    }
    if (this.status != 200) {
        // Handle error ...
        return;
    }
    ...
    var text = this.responseText;
    var document = this.responseXML;
  }
  

  • Either GET or POST request (but usually POST).
  • Same-origin restriction for AJAX URLs.
  • Arbitrary request message (typically name-value pairs).
  • Event-based: sending code returns immediately after calling send.
  • Event handler gets called at various stages in the processing of the request (usually only care about "done").
  • Response available as either raw text or an XML document.
  • Can set request headers and read response headers.
• For complete details on XMLHttpRequest objects, see the W3C specification: W3C Documentation for XMLHttpRequest.

• Rails example of higher-level abstraction built on AJAX:

  <%= observe_field :userName,
          :frequency    => 0.25,
          :update       => "completionMenu",
          :url          => {:action => "nameChoices"} %>
  

  • Helper method for generating HTML.
  • Detects changes in the form field whose DOM id is userName.
  • Makes an AJAX request to the nameChoices action in the current controller.
  • Response is HTML, which will replace the innerHTML of the DOM element whose id is completionMenu.
• AJAX responses tend to be one of the following:
  • HTML to replace the contents of an element.
  • Javascript code to execute.
  • Structured data to be processed by Javascript in the browser:
    • Original design was for this to be XML, but XML not used as much in practice:
      • Other forms simpler.
      • Slow parsing in the browser.
      • Quirky XML parsers (especially Internet Explorer).
    • Most common form today: JSON (JavaScript Object Notation): Javascript string that evaluates to an Object:

      {name: "Alice", gpa: 3.5,
      friends: ["Bill", "Carol", "David"]}
      

    • Used to transport data between server and browser.
    • Evaluated on browser to generate Javascript data.
    • Browsers optimized to do this quickly.

• Other ways to get AJAX-like behavior:
  • Create a new <script> element:
    • Fetches Javascript and executes it.
    • Can provide parameters in the URL.
    • Can embed data in the response using JSON.
    • Avoids same-origin restrictions (careful!).
  • Form posts:
    • Use the target attribute to redirect the POST response to a hidden iframe.
    • Embed Javascript in the response.