400 likes | 427 Views
JavaScript & AJAX. CS 236607, Winter 2007/8. JavaScript. Overview. JavaScript is a scripting language most often used for client-side web development, and best known for this use in websites (as client-side JavaScript).
E N D
JavaScript & AJAX CS 236607, Winter 2007/8
Overview • JavaScript is a scripting language most often used for client-side web development, and best known for this use in websites (as client-side JavaScript). • JavaScript is essentially unrelated to the Java programming language, though it copies many Java names and naming conventions. • JavaScript is used in many Web pages to add functionality, validate forms, detect browsers, and much more.
JavaScript by Examples • We will look at some JavaScript examples…
Hello World <html> <body> <script type="text/javascript"> document.write(“<h1>Hello World!</h1>"); </script> </body> </html> DOM treatment of the page
Document URL <html> <body> The URL of this document is: <script type="text/javascript"> document.write(document.URL); </script> </body> </html>
More Examples • Count the number of images in a document • What are the coordinates of the cursor? • Notice events are thrown (events-driven)
Form Validation <html> <head> <script type="text/javascript"> function validate()…(next slide) </script> </head> <body> <form action="tryjs_submitpage.htm" onsubmit="return validate()"> Name (max 10 chararcters): <input type="text" id="fname" size="20"><br /> Age (from 1 to 100): <input type="text" id="age" size="20"><br /> E-mail: <input type="text" id="email" size="20"><br /> <br/> <input type="submit" value="Submit"> </form> </body> </html>
Form Validation (Cont.) <script type="text/javascript"> function validate() { var at=document.getElementById("email").value.indexOf("@"); var age=document.getElementById("age").value; var fname=document.getElementById("fname").value; submitOK="true"; if (fname.length>10){ alert("The name must be less than 10 characters"); submitOK="false"; } if (isNaN(age)||age<1||age>100) { alert("The age must be a number between 1 and 100"); submitOK="false"; } if (at==-1) { alert("Not a valid e-mail!"); submitOK="false"; } if (submitOK=="false") { return false; } } </script> DOM Objects JavaScript Function Object Property
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 • 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.
Real-Life Examples of AJAX Apps • Google maps • http://maps.google.com/ • Goolgle Suggest • http://www.google.com/webhp?complete=1&hl=en • Gmail • http://gmail.com/ • Yahoo Maps (new) • 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 from JavaScript code on the client. • Handle the URL on the server and write to the response. • After the response is complete, integrate the response into the DOM (Document Object Model). • 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 For Mozilla: For Microsoft Explorer: var request = newXMLHttpRequest(); var request = new ActiveXObject("Microsoft.XMLHTTP");
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 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="text/javascript"> ... 2 slides ahead ... </script> </head>
An Example (Cont.) <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> What if we didn’t get yet the response in this stage?
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.
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 • 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
Asynchronous 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.) 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 • 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> <scripttype="text/javascript">…</script> </head> <bodyonload="init();loadCountries()"> <h1>Select a Continent:</h1>
XML+AJAX Example (Cont.) <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.) 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);} }}}
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 option.
Resources • DaveFancher.com • Hebrew University Course • javapassion.com • W3 Schools • Wikipedia • Core JavaServer Faces(2nd Edition) / David Geary, Cay S. Horstmann