Post on 03-Nov-2014
description
AJAXAJAXAAsynchronous synchronous JJavaScript avaScript
aand nd XXMLML
AJAXAJAX
• 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 RequestsLaunching HTTP Requests
Typically, 3 steps are required:
1.1. Construct and configure an XMLHttpRequest object
2.2. Launch the request
3.3. Process the response
Constructing an Constructing an XMLHttpRequestXMLHttpRequest
For Mozilla:
For Microsoft Explorer:
var request = new XMLHttpRequest();
var request = new ActiveXObject("Microsoft.XMLHTTP");
Configuring an Configuring an XMLHttpRequestXMLHttpRequest
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 RequestLaunching the Request
request.send(content )
• content is the posted in a POST request
• content can be "null" or empty
Reading the ResponseReading 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")
<html>
< head>
< title<Jokes>/title>
< script type="text/javascript">
...2 slides ahead...
/< script>
/< head >
An ExampleAn Example
>body onload="init(); setJoke()"<
>h1<Select a Joke:>/h1<
>p<>select onchange="setJoke(value)"<
>option value="1" selected="selected"<Joke 1>/option<
>option value="2"<Joke 2>/option<
>option value="3"<Joke 3>/option<
>/select<>/p<
>div id="jokediv"<>/div<
>/body<
>/html<
An Example (cont'd)An Example (cont'd)
>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 RequestsAsynchronous 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)
XMLHttpRequestXMLHttpRequest States States
• The XMLHttpRequest goes through several states:
• In the request configuration, you can define a function to call upon state change:
00 not initialized 11 loading 22 loaded
33 interactive 44 complete
request.onreadystatechange = functionName
XMLHttpRequestXMLHttpRequest States (cont) 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 ExampleAn Example
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<"; }
}
An Example (cont'd)An Example (cont'd)
Integrating AJAX and XML using DOMIntegrating AJAX and XML using DOM
The next example shows how XML data can be parsed and added into the content of your page
>html<
>head<>title<Country List>/title<
>script type="text/javascript"<…>/script<
>/head<
>body onload="init();loadCountries()"<
>h1<Select a Continent:>/h1<
XML+AJAX ExampleXML+AJAX Example
>p<>select id="continenetList" onchange="loadCountries()"<
>option value="asia"<Asia>/option<
>option value="africa"<Africa>/option<
>option value="europe"<Europe>/option<
>/select<>/p<
>p<>select size="10" id="countryList"<>/select<>/p<
>/body<
>/html<
XML+AJAX Example (cont'd)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)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)XML+AJAX Example (cont'd)