Lecture 17: Ajax (Asynchronous JavaScript And XML) Google ...

Google Suggest http://labs.google.com/suggest

Lecture 17: Ajax (Asynchronous JavaScript And XML) Wendy Liu CSC309F – Fall 2007

1

2

Spinning Wheel Progress Indicator

Low-level View The Basics

3

4

1

Classic vs. Ajax

Synchronous vs. Asynchronous

5

6

Overview of Ajax „

It is not a new programming language, but a new way (technique) to use existing standards „

„

„ „

JavaScript object „ Provide

To create better, faster, and more user-friendly and interactive web applications

„ String

two views of the response (text) and XML

„ Capable

of issuing GET, POST, HEAD, PUT, DELETE, OPTIONS requests

Uses JavaScript as its programming language Uses the XMLHttpRequest object to communicate directly with the server Trades data with a web server without reloading the page

„

Uses asynchronous data transfer (via HTTP requests) between the browser and the web server „

„

„

Based on JavaScript and HTTP requests „

„

XMLHttpRequest

Security limitations apply „ Same

point of origin

„ Can

Allowing web pages to request small bits of information from the server instead of whole pages

only connect to same domain as currently loaded

page

It is a browser technology independent of web server software 7

8

2

XMLHttpRequest Properties „

onreadystatechange Defines a function to receive data returned by the server after a request is sent „ Must be set before sending request „ The following code defines a function for this purpose (with an empty body for now)

Receiving data (handle response)

„

„ onreadystatechange „ readyState „ responseText „ responseXML

var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { // code for receiving response data } 9

10

readyState

Update the Function

This property holds the status of the server's response „ Each time the readyState changes, the onreadystatechange function will be executed „ State description

xmlhttp.onreadystatechange=function() {

„

0 1 2 3 4

if (xmlhttp.readyState==4) { // Get the data from the server's response }

The request is not initialized The request has been set up The request has been sent The request is in process The request is complete

}

11

12

3

responseText

responseXML

„Retrieve

text data returned by the server „Type: DOMString (readonly)

Retrieve document data returned by the server „ Type: Document (readonly) „

xmlhttp.onreadystatechange=function() var xmldoc=xmlhttp.responseXML.documentElement;

{ if (xmlhttp.readyState==4) { document.getElementById(‘formentry’).value = xmlhttp.responseText; }

„

You can access it as a DOM document „

As you did in A1

} 13

14

XMLHttpRequest Methods „ Asking

Execute the Ajax Function

for data (send request)

„

„ open() „ Two

required arguments

function myajax() { . . . /* all of the code from before */ . . . }

method (GET, POST, PUT, DELETE, HEAD, OPTION) „ server-side URI „



„ send() „ One „

Want it to run "behind the scenes"

argument



data to be sent (DOMString or Document) „ null for GET „

can be omitted

15

16

4

The Basic Ajax Process „

JavaScript Define an object for sending HTTP requests „ Initiate request „

„ Get

Examples

request object a request handler function

„ Designate „

Supply as onreadystatechange attribute of request

„ Initiate

a GET or POST request „ Send data

Putting it Together „

Handle response „ Wait

for readyState of 4 and HTTP status of 200 return text with responseText or responseXML „ Do something with result „ Extract

17

18

The Basic Ajax Process (cont’d) „

Define a Request Object

HTML

var request;

„ Loads

JavaScript „ Designates control that initiates request „ Gives ids to input elements that will be read by script

function getRequestObject() { if (window.XMLHttpRequest) { return(new XMLHttpRequest()); } else { return(null); } Browsers that support it } 19

20

5

Initiate Request

Handle Response

function sendRequest() { request = getRequestObject(); Response handler function name request.onreadystatechange = handleResponse; request.open("GET", "message-data.html", true); request.send(null); URL of server-side } resource

Don't wait for response (Default). Send request asynchronously

function handleResponse() { if (request.readyState == 4) { alert(request.responseText); } } Text of server response

Response is returned from server (handler is invoked multiple times)

Data (null for GET)

21

Complete JavaScript Code (show-message.js)

var request; function getRequestObject() { if (window.ActiveXObject) { return(new ActiveXObject("Microsoft.XMLHTTP")); } else if (window.XMLHttpRequest) { return(new XMLHttpRequest()); } else { return(null); } } function sendRequest() { // called in XHTML request = getRequestObject(); request.onreadystatechange = handleResponse; request.open("GET", "message-data.html", true); request.send(null); } function handleResponse() { if (request.readyState == 4) { alert(request.responseText); } }

22

XHTML Code (show-message.html)