AJAX Asynchronous JavaScript and XML

AJAX An interface that allows for the HTTP communication without page refreshment Web pages are loaded into an object within the script (e.g., JavaScript) execution and integrated with the page content Thus, the Web page can communicate with the server without refreshing the whole page

An Example

Launching HTTP Requests Typically, 3 steps are required: Construct and configure an XMLHttpRequest object Launch the request Process the response

Constructing an XMLHttpRequest For Mozilla (+IE7.0): For Microsoft Internet Explorer (<7.0): var request = new XMLHttpRequest(); var request = new ActiveXObject("Microsoft.XMLHTTP");

Configuring an XMLHttpRequest request.open("method","URL",false) request.setRequestHeader(" header "," value ") method is GET, POST, etc. URL must be in the domain of the current (or a relative URL), for security reasons The false will be discussed later

Launching the Request request.send(content ) content is the posted in a POST request content can be "null" or empty

Reading the Response request.responseText The response as flat text request.responseXML The response as a (DOM) Document object Available if response Content-Type is text/XML request.statusrequest.statusText request.getAllResponseHeaders() request.getResponseHeader("header")

Jokes... 2 slides ahead... An Example

Select a Joke: Joke 1 Joke 2 Joke 3 An Example (cont'd)

var jDiv; function init() { jDiv = document.getElementById("jokediv");} function setJoke(value) { request = new XMLHttpRequest(); request.open("GET","joke"+value+".txt",false); request.send(null); if(request.status==200){ jDiv.innerHTML=request.responseText; } else {jDiv.innerHTML = " Cannot load joke... ";} }

Asynchronous Requests Reading of a Web page can take a long time during which the browser is blocked Solution: launch the request asynchronously That is, the execution continues after send is called without waiting for it to complete When the request is completed, a predefined function is called request.open("method","URL",true)

XMLHttpRequest States The XMLHttpRequest goes through several states: In the request configuration, you can define a function to call upon state change: 0 0 not initialized 1 1 loading 2 2 loaded 3 3 interactive 4 4 complete request.onreadystatechange = functionName

XMLHttpRequest States (cont) Use request.readyState to get the current state of the request Use request.abort() to stop the request

var request; function setJoke(value) { request = new XMLHttpRequest(); request.open("GET","joke"+value+".txt",true); request.onreadystatechange = updateJokeDiv; request.send(null); } An Example

function updateJokeDiv() { if(request.readyState<4) { jokeDiv.innerHTML = " Loading... "; return; } if(request.status==200) { jokeDiv.innerHTML = request.responseText; } else { jokeDiv.innerHTML = " Cannot load joke! "; } } An Example (cont'd)

Integrating AJAX and XML using DOM The next example shows how XML data can be parsed and added into the content of your page

Country List … Select a Continent: XML+AJAX Example

Asia Africa Europe XML+AJAX Example (cont'd)

function init() { continents = document.getElementById("continenetList"); countries = document.getElementById("countryList"); } function loadCountries() { var xmlURL = "countries-"+continents.value+".xml"; var request = new XMLHttpRequest(); request.onreadystatechange = updateCountries; request.open("GET",xmlURL,true); request.send(null); } XML+AJAX Example (cont'd)

function updateCountries() { if(request.readyState==4) { while(countries.length>0){countries.remove(0);} if(request.status==200) { var names = request.responseXML.getElementsByTagName("name"); for(var i=0; i<names.length; ++i) { option = document.createElement("option"); option.text=option.value=names[i].firstChild.nodeValue; countries.appendChild(option);} }}} XML+AJAX Example (cont'd)