ppt
Upcoming SlideShare
Loading in...5
×
 

ppt

on

  • 632 views

 

Statistics

Views

Total Views
632
Views on SlideShare
632
Embed Views
0

Actions

Likes
0
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

ppt ppt Presentation Transcript

  • 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
    • Thus, the Web page can communicate with the server without refreshing the whole page
  • An Example
  • 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 :
    • For Microsoft Explorer :
    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. status request. statusText request. getAllResponseHeaders () request. getResponseHeader (" header ")
  • An Example < html > < head > < title > Jokes </ title > < script type=&quot;text/javascript&quot; > ... 2 slides ahead ... </ script > </ head >
  • An Example (cont'd) < body onload = &quot;init(); setJoke()&quot; > < h1 >Select a Joke:</ h1 > < p >< select onchange = &quot;setJoke(value)&quot; > < option value = &quot;1&quot; selected = &quot;selected&quot; >Joke 1 </ option > < option value = &quot;2&quot; >Joke 2 </ option > < option value = &quot;3&quot; >Joke 3 </ option > </ select ></ p > < div id = &quot;jokediv&quot; ></ div > </ body > </ html >
  • < script type=&quot;text/javascript&quot; > var jDiv ; function init () { jDiv = document . getElementById ( &quot; jokediv &quot; ) ;} function setJoke ( value ) { request = new XMLHttpRequest () ; request . open ( &quot; GET &quot; , &quot; joke &quot; + value + &quot; .txt &quot; , false ) ; request . send ( null ) ; if ( request . status == 200 ) { jDiv . innerHTML = request . responseText ; } else { jDiv . innerHTML = &quot; <i>Cannot load joke...</i> &quot; ;} } </ 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 (&quot; method &quot;,&quot; URL &quot;, 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 ( &quot; GET &quot;,&quot; joke &quot; + value + &quot; .txt &quot; , true ) ; request . onreadystatechange = updateJokeDiv ; request . send ( null ) ; }
  • An Example (cont'd) function updateJokeDiv () { if ( request . readyState < 4 ) { jokeDiv . innerHTML = &quot; <i>Loading...</i> &quot; ; return ; } if ( request . status == 200 ) { jokeDiv . innerHTML = request . responseText; } else { jokeDiv . innerHTML = &quot; <i>Cannot load joke!</i> &quot; ; } }
  • 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 > < script type = &quot;text/javascript&quot; >…</ script > </ head > < body onload = &quot;init () ; loadCountries () &quot; > < h1 >Select a Continent:</ h1 >
  • XML+AJAX Example (cont'd) < p >< select id = &quot;continenetList&quot; onchange = &quot;loadCountries () &quot; > < option value = &quot;asia&quot; >Asia</ option > < option value = &quot;africa&quot; >Africa</ option > < option value = &quot;europe&quot; >Europe</ option > </ select ></ p > < p >< select size = &quot; 10 &quot; id = &quot;countryList&quot; ></ select ></ p > </ body > </ html >
  • XML+AJAX Example (cont'd) function init () { continents = document . getElementById ( &quot; continenetList &quot; ) ; countries = document . getElementById ( &quot; countryList &quot; ) ; } function loadCountries () { var xmlURL = &quot; countries- &quot; + continents . value + &quot; .xml &quot; ; var request = new XMLHttpRequest () ; request . onreadystatechange = updateCountries; request . open ( &quot; GET &quot; , 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 ( &quot; name &quot; ) ; for ( var i = 0 ; i < names . length; ++ i ) { option = document . createElement ( &quot; option &quot; ) ; option . text = option . value = names [ i ]. firstChild . nodeValue; countries . appendChild ( option ) ;} }}}