Lecture Notes for CS 142
Fall 2010
John Ousterhout

  • Readings for this topic:
    • Pages 195-208 of the online supplement to Dynamic HTML: The Definitive Reference, by Danny Goodman.
    • Section 24.1 of Agile Web Development with Rails.
  • "Asynchronous Javascript And XML"
  • Simple idea:
    • Issue an HTTP request to the server from Javascript without replacing the current page.
    • Process the response with Javascript code in the browser.
  • Example:
    xhr = new XMLHttpRequest();
    xhr.onreadystatechange = xhrHandler;
    xhr.open("POST", url);
    function xhrHandler() {
      if (this.readyState != 4) {
      if (this.status != 200) {
          // Handle error ...
      var text = this.responseText;
      var document = this.responseXML;
    • Either GET or POST request (but usually POST).
    • Arbitrary request message (typically name-value pairs just like other POSTs).
    • 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 state 4: 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.
  • 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 much for this anymore:
        • 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.
  • Rails example of higher-level abstraction built on AJAX:
    <%= observe_field
        :update       => "completionMenu",
        :url          => {:action => "nameChoices"} %>
    • Helper method for generating HTML.
    • Detects changes in the form field whose DOM id is form_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.
  • Other ways to get AJAX-like behavior:
    • Use Javascript to add a new <script> DOM element:
      • Fetches Javascript and executes it.
      • Can provide parameters in the URL.
      • Can embed data in the response using JSON.
    • Form posts:
      • Use the target attribute to redirect the POST response to a hidden iframe.
      • Embed Javascript in the response.
  • Alternate style of application design (e.g. Gmail):
    • HTML rendering done on the browser rather than the server.
    • Main page for application consists mostly of Javascript.
    • Javascript code uses AJAX to fetch raw data from server, not HTML.
    • Javascript code then renders HTML, adds to DOM.