Lecture Notes for CS 142
Spring 2012
John Ousterhout

  • Additional reading for this topic:
    • Pages 195-208 of the online supplement to Dynamic HTML: The Definitive Reference, by Danny Goodman.
    • Note: I do not recommend Chapter 12 of The Rails 3 Way: it fairly confusing and introduces topics such as jQuery and Unobtrusive Javascript that are not relevant for this class.
  • "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;
    • 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 (for this class, just use raw text).
    • 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.
      • On server, use to_json method, implemented by Rails for all Objects (e.g. models). For example, to convert a collection of models to JSON and return as result of AJAX request:
        @students = Student.find(:all)
        render :text => @students.to_json);
        JSON returned in HTTP response:
      • On browser, use eval to generate Javascript object from AJAX response:
        var students = eval(xhr.responseText);
      • Browsers optimized to do this quickly.
  • 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.
        <iframe name="xyz"></iframe>
        <form target="xyz"> ... </form>
      • Embed Javascript in the response.
      • This approach offers a better solution to the issue of error handling in forms
        • Target all form POST requests to an invisible <iframe> element.
        • In the normal case where the form post succeeds, redirect as usual (but do it by sending back HTML containing Javascript that redirects the main page)
        • If there are errors, return Javascript that displays error messages in the existing page.
        • This is cleaner and more powerful than the Rails approach of re-rendering the form page.
  • Alternate style of application design (e.g. Gmail): Javascript-only applications
    • 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.