Download
1 / 24
240 likes | 254 Views
JavaScript & AJAX. CS 236607, Spring 2008. 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, Spring 2008
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…
HelloWorld.html <html> <body> <script type="text/javascript"> document.write(“<h1>Hello World!</h1>"); </script> </body> </html> DOM treatment of the page
DocumentURL.html <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 • 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 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 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")
