210 likes | 338 Views
AJAX A synchronous J avaScript a nd X ML. 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
E N D
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
Launching HTTP Requests Typically, 3 steps are required: 1.Construct and configure an XMLHttpRequest object 2.Launch the request 3.Process the response
Constructing an XMLHttpRequest For Mozilla (+IE7.0): For Microsoft Internet Explorer (<7.0): var request = newXMLHttpRequest(); var request = new ActiveXObject("Microsoft.XMLHTTP");
Configuring an XMLHttpRequest request.open("method","URL",false) • methodis 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 request.setRequestHeader("header","value")
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.status request.statusText request.getAllResponseHeaders() request.getResponseHeader("header")
An Example <html> <head> <title>Jokes</title> <script type="text/javascript"> ... 2 slides ahead ... </script> </head>
An Example (cont'd) <bodyonload="init(); setJoke()"> <h1>Select a Joke:</h1> <p><select onchange="setJoke(value)"> <optionvalue="1"selected="selected">Joke 1</option> <optionvalue="2">Joke 2</option> <optionvalue="3">Joke 3</option> </select></p> <divid="jokediv"></div> </body> </html>
<script type="text/javascript"> 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 ="<i>Cannot load joke...</i>";} } </script>
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 not initialized 1 loading 2 loaded 3 interactive 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
An Example var request; function setJoke(value){ request =new XMLHttpRequest(); request.open("GET","joke"+value+".txt",true); request.onreadystatechange = updateJokeDiv; request.send(null); }
An Example (cont'd) function updateJokeDiv() { if(request.readyState<4) { jokeDiv.innerHTML ="<i>Loading...</i>"; return; } if(request.status==200) { jokeDiv.innerHTML = request.responseText; } else { jokeDiv.innerHTML ="<i>Cannot load joke!</i>"; } }
Integrating AJAX and XML using DOM The next example shows how XML data can be parsed and added into the content of your page
XML+AJAX Example <html> <head><title>Country List</title> <scripttype="text/javascript">…</script> </head> <bodyonload="init();loadCountries()"> <h1>Select a Continent:</h1>
XML+AJAX Example (cont'd) <p><selectid="continenetList"onchange="loadCountries()"> <optionvalue="asia">Asia</option> <optionvalue="africa">Africa</option> <optionvalue="europe">Europe</option> </select></p> <p><selectsize="10"id="countryList"></select></p> </body> </html>
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);} }}}