Download
1 / 21
210 likes | 289 Views
AJAX – A synchronous J avaScript a nd X ML. CS 236369, Spring 2010. Where Were We Before AJAX?. Static pages give the illusion of interactivity through standard form submissions. Form submissions result in full page loads. So, What’s The Problem?.
E N D
AJAX – Asynchronous JavaScript and XML CS 236369, Spring 2010
Where Were We Before AJAX? • Static pages give the illusion of interactivity through standard form submissions. • Form submissions result in full page loads.
So, What’s The Problem? • Many actions only manipulate small portions of the page but the entire page must be reloaded. • Server responses contain the entire page content rather than just the portion being updated. • Loading entire pages typically results in several additional HTTP requests for images, style sheets, scripts, and any other content that may be on the page.
AJAX - Asynchronous JavaScript and XML • A group of interrelated web development techniques used on the client-side to create interactive web applications / rich Internet applications. • With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. • Thus, the Web page can communicate with the server without refreshing the whole page.
Real-Life Examples of AJAX Apps • Google maps • http://maps.google.com/ • Goolgle Suggest (Now integrated in Google’s homepage) • http://www.google.com/webhp?complete=1&hl=en • Yahoo Maps • http://maps.yahoo.com/ • Many more…
AJAX Components • JavaScript • DOM • XMLHttpRequest object (XHR) • XML
Ajax Fundamentals • Ajax uses a three-step process: • Request a URL by the JavaScript code – client side. • Handle the URL on the server and write to the response – server side. • After the response is complete, integrate the response into the DOM (Document Object Model) – client side. • In an Ajax request we don't refresh the entire page; instead, we update only part of the page.
The Server side • Ajax newcomers sometimes mistakenly believe that Ajax, because it provides a more responsive user interface, reduces server-side traffic. • In fact, Ajax applications typically have more server-side traffic because each Ajax request involves a trip to the server. • Because those requests are asynchronous, however, Ajax creates the perception of a more responsive UI, though it typically does not reduce the load on the server. Did we reduce the load on the server?
So, How Does It Work? • JavaScript is used to: • Create and control instances of the XMLHttpRequest (XHR) object. • Provide handlers for responses. • Manipulate the DOM. • The XMLHttpRequest object: • Allows scripts to perform HTTP client functionality. • Supports GET and POST operations.
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 In all modern browsers: In older Microsoft browsers (IE 5 and 6): (The XMLHttpRequest object is not specified in any W3C recommendation – it is not a W3C standard) var request = newXMLHttpRequest(); var request = new ActiveXObject("Microsoft.XMLHTTP");
Configuring an XMLHttpRequest request.open("method","URL",isAsynchronous) • methodis GET, POST, etc. • URL must be in the domain of the current (or a relative URL), for security reasons • The isAsynchronous boolean parameter will be discussed later request.setRequestHeader("header","value")
Launching the Request request.send(content) • content is the posted in a POST request • content can be null or empty
Reading the Response The XHR Object 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="text/javascript"> ... 2 slides ahead ... </script> </head>
An Example (Cont.) <bodyonload="init(); setJoke()"> <h2>Current date on server:<spanid="serverTimeSpan“>? </span><h2> <h1>Select a Joke:</h1> <p><select onchange="presentServerTime();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"> varjokeDiv; vartimeSpan; function init() { jokeDiv=document.getElementById("jokediv"); timeSpan=document.getElementById("serverTimeSpan"); } functionpresentServerTime() { var request = newXMLHttpRequest(); request.open("GET", "current-time.jsp", false); request.send(null); if (request.status == 200) timeSpan.innerHTML = request.responseText; else timeSpan.innerHTML="Cannot load server time..."; {
functionsetJoke(value) { var request = newXMLHttpRequest(); request.open("GET", "joke" + value + ".txt", false); request.send(null); if (request.status == 200) jokeDiv.innerHTML = request.responseText; else jokeDiv.innerHTML = "Cannot load joke..."; { </script>
current-time.jsp <%=new java.util.Date() %> <% long t0,t1; t0=System.currentTimeMillis(); do{ t1=System.currentTimeMillis(); { while (t1-t0<3000);//wait for 3 seconds %>
Example (Cont.) • Our examples use “false" in the third parameter of open(). • This parameter specifies whether the request should be handled asynchronously. • As you can notice by running this example, the joke only appear after the JSP response is received. • True means that the script continues to run after the send() method, without waiting for a response from the server.
