1 JavaScript & AJAX – Part II CS , Spring 2008

2 Jokes... 2 slides ahead... An Example

Select a Joke: Joke 1 Joke 2 Joke 3 An Example (Cont.)

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 = " Cannot load joke... ";} } What if we didn’t get yet the response in this stage?

5 Example (Cont.) Our examples use “false" in the third parameter of open().  This parameter specifies whether the request should be handled asynchronously. True means that the script continues to run after the send() method, without waiting for a response from the server. Let’s see how it works, and how it is saved on the Tomcat server.

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

7 XMLHttpRequest States The XMLHttpRequest goes through several states: In the request configuration, you can define a function to call upon state change: 0 0 not initialized 1 1 loading 2 2 loaded 3 3 interactive 4 4 complete request.onreadystatechange = functionName

8 XMLHttpRequest States (Cont.) Use request.readyState to get the current state of the request Use request.abort() to stop the request

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

function updateJokeDiv() { if(request.readyState<4) { jokeDiv.innerHTML = " Loading... "; return; } if(request.status==200) { jokeDiv.innerHTML = request.responseText; } else { jokeDiv.innerHTML = " Cannot load joke! "; } } An Example (Cont.)

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

12 Country List … Select a Continent: XML+AJAX Example

Asia Africa Europe XML+AJAX Example (Cont.)

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

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

16 JavaScript Libraries To reduce the amount of JavaScript code you need to write for Ajax requests, and to make sure that those requests succeed across multiple browsers, one better use a JavaScript library that neatly encapsulates those details and sharp edges in convenient JavaScript objects. The Prototype Library is one good basic option The Prototype Library jQuery is a more advanced option jQuery ZK is even more advanced (and has JSP integration) ZK JavaScript Frameworks Comparison (Wikipedia) JavaScript Frameworks Comparison

17 Resources DaveFancher.com Hebrew University Course javapassion.com W3 Schools Wikipedia Core JavaServer Faces(2nd Edition) / David Geary, Cay S. Horstmann