ajax a synchronous j avascript a nd x ml
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: AJAX A synchronous J avaScript a nd X ML](https://reader036.vdocument.in/reader036/viewer/2022062723/5681402f550346895dab90b0/html5/thumbnails/1.jpg)
AJAXAJAXAAsynchronous synchronous JJavaScript avaScript
aand nd XXMLML
![Page 2: AJAX A synchronous J avaScript a nd X ML](https://reader036.vdocument.in/reader036/viewer/2022062723/5681402f550346895dab90b0/html5/thumbnails/2.jpg)
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
![Page 3: AJAX A synchronous J avaScript a nd X ML](https://reader036.vdocument.in/reader036/viewer/2022062723/5681402f550346895dab90b0/html5/thumbnails/3.jpg)
An Example
![Page 4: AJAX A synchronous J avaScript a nd X ML](https://reader036.vdocument.in/reader036/viewer/2022062723/5681402f550346895dab90b0/html5/thumbnails/4.jpg)
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
![Page 5: AJAX A synchronous J avaScript a nd X ML](https://reader036.vdocument.in/reader036/viewer/2022062723/5681402f550346895dab90b0/html5/thumbnails/5.jpg)
Constructing an Constructing an XMLHttpRequestXMLHttpRequest
For Mozilla (+IE7.0):
For Microsoft Internet Explorer (<7.0):
var request = new XMLHttpRequest();
var request = new ActiveXObject("Microsoft.XMLHTTP");
![Page 6: AJAX A synchronous J avaScript a nd X ML](https://reader036.vdocument.in/reader036/viewer/2022062723/5681402f550346895dab90b0/html5/thumbnails/6.jpg)
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
![Page 7: AJAX A synchronous J avaScript a nd X ML](https://reader036.vdocument.in/reader036/viewer/2022062723/5681402f550346895dab90b0/html5/thumbnails/7.jpg)
Launching the RequestLaunching the Request
request.send(content )
• content is the posted in a POST request
• content can be "null" or empty
![Page 8: AJAX A synchronous J avaScript a nd X ML](https://reader036.vdocument.in/reader036/viewer/2022062723/5681402f550346895dab90b0/html5/thumbnails/8.jpg)
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")
![Page 9: AJAX A synchronous J avaScript a nd X ML](https://reader036.vdocument.in/reader036/viewer/2022062723/5681402f550346895dab90b0/html5/thumbnails/9.jpg)
<html<
< head<
< title<Jokes</title<
< script type="text/javascript"<
...2 slides ahead...
/< script<
/< head <
An ExampleAn Example
![Page 10: AJAX A synchronous J avaScript a nd X ML](https://reader036.vdocument.in/reader036/viewer/2022062723/5681402f550346895dab90b0/html5/thumbnails/10.jpg)
<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)
![Page 11: AJAX A synchronous J avaScript a nd X ML](https://reader036.vdocument.in/reader036/viewer/2022062723/5681402f550346895dab90b0/html5/thumbnails/11.jpg)
<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<
![Page 12: AJAX A synchronous J avaScript a nd X ML](https://reader036.vdocument.in/reader036/viewer/2022062723/5681402f550346895dab90b0/html5/thumbnails/12.jpg)
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)
![Page 13: AJAX A synchronous J avaScript a nd X ML](https://reader036.vdocument.in/reader036/viewer/2022062723/5681402f550346895dab90b0/html5/thumbnails/13.jpg)
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
![Page 14: AJAX A synchronous J avaScript a nd X ML](https://reader036.vdocument.in/reader036/viewer/2022062723/5681402f550346895dab90b0/html5/thumbnails/14.jpg)
XMLHttpRequestXMLHttpRequest States (cont) States (cont)
• Use request.readyState to get the current state of the request
• Use request.abort() to stop the request
![Page 15: AJAX A synchronous J avaScript a nd X ML](https://reader036.vdocument.in/reader036/viewer/2022062723/5681402f550346895dab90b0/html5/thumbnails/15.jpg)
var request;
function setJoke(value) {
request = new XMLHttpRequest();
request.open("GET","joke"+value+".txt",true);
request.onreadystatechange = updateJokeDiv;
request.send(null);
}
An ExampleAn Example
![Page 16: AJAX A synchronous J avaScript a nd X ML](https://reader036.vdocument.in/reader036/viewer/2022062723/5681402f550346895dab90b0/html5/thumbnails/16.jpg)
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)
![Page 17: AJAX A synchronous J avaScript a nd X ML](https://reader036.vdocument.in/reader036/viewer/2022062723/5681402f550346895dab90b0/html5/thumbnails/17.jpg)
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
![Page 18: AJAX A synchronous J avaScript a nd X ML](https://reader036.vdocument.in/reader036/viewer/2022062723/5681402f550346895dab90b0/html5/thumbnails/18.jpg)
<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
![Page 19: AJAX A synchronous J avaScript a nd X ML](https://reader036.vdocument.in/reader036/viewer/2022062723/5681402f550346895dab90b0/html5/thumbnails/19.jpg)
<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)
![Page 20: AJAX A synchronous J avaScript a nd X ML](https://reader036.vdocument.in/reader036/viewer/2022062723/5681402f550346895dab90b0/html5/thumbnails/20.jpg)
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)
![Page 21: AJAX A synchronous J avaScript a nd X ML](https://reader036.vdocument.in/reader036/viewer/2022062723/5681402f550346895dab90b0/html5/thumbnails/21.jpg)
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)