AJAX Basics xhr new XMLHttp Request xhr onreadystatechange

AJAX Basics xhr = new XMLHttp. Request(); xhr. onreadystatechange = xhr. Handler; xhr. open("POST", url); xhr. send(post. Data); State 4 means “done”. . . function xhr. Handler() { if (this. ready. State != 4) { return; } if (this. status != 200) { // Handle error. . . return; }. . . var text = this. response. Text; Response available as var document = this. response. XML; raw text or XML } CS 142 Lecture Notes: Ajax Slide 1

JSON Example {name: "Alice", gpa: 3. 5, friends: ["Bill", "Carol", "David"]} CS 142 Lecture Notes: Ajax Slide 2

Higher-Level AJAX Example <%= form. text_field(: user. Name) %>. . . <div id="completion. Menu">. . . </div>. . . Name: Al Alfred Wang Alice Washington Allen Williams Allison Mc. Lean Alok Chandra <%= observe_field( : form_user. Name, : update => "completion. Menu", : url => {: action => "name. Choices"} ) %> class Foo. Controller < Application. Controller def name. Choices prefix = params[: form][: user. Name]. . . compute names. . . render : partial => "name_list", : layout => false end Slide 3

Higher-Level AJAX Example <%= form. text_field(: user. Name) %>. . . <div id="completion. Menu">. . . </div>. . . Name: Al Alfred Wang Alice Washington Allen Williams Allison Mc. Lean Alok Chandra <%= observe_field( : form_user. Name, : update => "completion. Menu", : url => {: action => "name. Choices"} ) %> class Foo. Controller < Application. Controller def name. Choices prefix = params[: form][: user. Name]. . . compute names. . . render : partial => "name_list", : layout => false end Slide 4

CS 142 Lecture Notes: Ajax Slide 5