CS 142 Lecture Notes: FormsSlide 1 AJAX Basics 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; } State 4 means “done” Response available as raw text or XML

CS 142 Lecture Notes: FormsSlide 2 Higher-Level AJAX Example <%= observe_field( "userName", :frequency => 0.25, :update => "completionMenu", :url => {:action => "nameChoices"} ) %> Watch this element for change Replace this element’s innerHTML with response Issue AJAX request here

CS 142 Lecture Notes: FormsSlide 3 JSON Example {name: "Alice", gpa: 3.5, friends: ["Bill", "Carol", "David"]}

CS 142 Lecture Notes: FormsSlide 4