1 / 21

Understanding AJAX: Asynchronous JavaScript and XML for Dynamic Web Communication

AJAX (Asynchronous JavaScript and XML) is a powerful web development technique that allows for HTTP communication without requiring a page refresh. It enables web pages to load data dynamically by using an XMLHttpRequest object, which can send requests to a server and process responses asynchronously. This results in a smoother user experience, as parts of a web page can be updated while the rest remains intact. By utilizing methods like request.open and request.send, developers can easily communicate with server-side scripts to retrieve or send data without disrupting user interaction.

makan
Télécharger la présentation

Understanding AJAX: Asynchronous JavaScript and XML for Dynamic Web Communication

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. AJAXAsynchronous JavaScript and XML

  2. 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

  3. An Example

  4. Launching HTTP Requests Typically, 3 steps are required: 1.Construct and configure an XMLHttpRequest object 2.Launch the request 3.Process the response

  5. Constructing an XMLHttpRequest For Mozilla (+IE7.0): For Microsoft Internet Explorer (<7.0): var request = newXMLHttpRequest(); var request = new ActiveXObject("Microsoft.XMLHTTP");

  6. 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")

  7. Launching the Request request.send(content) • content is the posted in a POST request • content can be "null" or empty

  8. 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")

  9. An Example <html> <head> <title>Jokes</title> <script type="text/javascript"> ... 2 slides ahead ... </script> </head>

  10. 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>

  11. <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>

  12. 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)

  13. 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

  14. XMLHttpRequest States (cont) • Use request.readyState to get the current state of the request • Use request.abort() to stop the request

  15. An Example var request; function setJoke(value){ request =new XMLHttpRequest(); request.open("GET","joke"+value+".txt",true); request.onreadystatechange = updateJokeDiv; request.send(null); }

  16. 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>"; } }

  17. Integrating AJAX and XML using DOM The next example shows how XML data can be parsed and added into the content of your page

  18. XML+AJAX Example <html> <head><title>Country List</title> <scripttype="text/javascript">…</script> </head> <bodyonload="init();loadCountries()"> <h1>Select a Continent:</h1>

  19. 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>

  20. 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); }

  21. 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);} }}}

More Related