Ajax a synchronous j avascript a nd x ml
Download
1 / 21

AJAX A synchronous J avaScript a nd X ML - PowerPoint PPT Presentation


  • 97 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' AJAX A synchronous J avaScript a nd X ML' - makan


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Ajax a synchronous j avascript a nd x ml

AJAXAsynchronous 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



Launching http requests
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
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
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
Launching the Request

request.send(content)

  • content is the posted in a POST request

  • content can be "null" or empty


Reading the response
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
An Example

<html>

<head>

<title>Jokes</title>

<script type="text/javascript">

... 2 slides ahead ...

</script>

</head>


An example cont d
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
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
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
XMLHttpRequest States (cont)

  • Use request.readyState to get the current state of the request

  • Use request.abort() to stop the request


An example1
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 d1
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
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
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
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 d1
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 d2
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);} }}}


ad