1 / 24

JavaScript & AJAX

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

denlow
Download Presentation

JavaScript & AJAX

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. JavaScript & AJAX CS 236607, Spring 2008

  2. JavaScript

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

  4. JavaScript by Examples • We will look at some JavaScript examples…

  5. HelloWorld.html <html> <body> <script type="text/javascript"> document.write(“<h1>Hello World!</h1>"); </script> </body> </html> DOM treatment of the page

  6. DocumentURL.html <html> <body> The URL of this document is: <script type="text/javascript"> document.write(document.URL); </script> </body> </html>

  7. More Examples • Count the number of images in a document • What are the coordinates of the cursor? • Notice events are thrown (events-driven)

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

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

  10. AJAX

  11. Where Were We Before AJAX? • Static pages give the illusion of interactivity through standard form submissions. • Form submissions result in full page loads.

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

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

  14. 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…

  15. AJAX Components • JavaScript • DOM • XMLHttpRequest object (XHR) • XML

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

  17. 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?

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

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

  20. Constructing an XMLHttpRequest For Mozilla: For Microsoft Explorer: var request = newXMLHttpRequest(); var request = new ActiveXObject("Microsoft.XMLHTTP");

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

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

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

  24. To be continued…

More Related