Upcoming SlideShare
Loading in...5







Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

AJAX AJAX Presentation Transcript

  • Ajax ( Asynchronous JavaScript and XML)
  • AJAX
    • Enable asynchronous communication between a web client and a server.
    • A client is not blocked when an asynchronous request is sent to a server. It assigns an event handler to intercept the response instead.
    • The technology is not limited to XML encoded data.
  • JavaScript: Building a Request (4 steps)
    • Step 1: Creating a XML HTTP Request object
      • var xmlhttp = new XMLHttpRequest();
    • Step 2: Specifying where and how to retrieve the resource
      • xmlhttp.open('GET', 'foo.jsp', true);
    • Step 3: Setting a function to be called when the response is returned by the server
      • xmlhttp.onreadystatechange = function() {
      • // Code to handle the response here
      • }
    • Step 4: Send the request
      • xmlhttp.send(null);
    • Note : Between step 2 and 3, the order is not important.
  • Step 1: Creating a XML HTTP Request object
    • Firefox, Opera, Safari, IE 7+
      • var xmlhttp = new XMLHttpRequest();
    • For earlier version if IE (< 7)
      • var xmlhttp = new ActiveXObject(MSXML_ProgID);
      • where MSXML_ProgID is a string identifying the Microsoft XML Core Services (MSXML) installed on the client machine.
      • It could be &quot;Msxml2.XMLHTTP.4.0&quot;, &quot; Msxml2.XMLHTTP&quot;, …
    • Note: To avoid code branching, you may want to use Sarissa ( http://dev.abiss.gr/sarissa/ ). It is an ECMAScript library acting as a cross-browser wrapper for native XML APIs
  • Step 2: Specifying what resource to retrieve
    • var xmlhttp = new XMLHttpRequest();
    • xmlhttp.open(method, URL, isAsync);
    • method : Typically 'GET' or 'POST'
    • URL : Identify the resource we want to retrieve
    • isAsync :
    • true  Asynchronous transmission
    • false or omitted  Synchronous transmission
    • Note: This method call does not cause any connection to establish.
  • Step 2: Specifying what resource to retrieve
    • The second parameter (URL) can be a relative path or a complete URL.
      • By default, browsers only allow XML HTTP request to be sent to the server where the current document resides (for privacy and security reasons).
      • So the complete URL must have the same domain as the current document.
    • Method open() may also take an additional 4 th and 5 th parameters ( userid and password ). The two parameters are used to bypass HTTP authentication.
  • Step 3: Setting a call-back function
    • xmlhttp.onreadystatechange = function() {
    • // Code to handle the response here
    • }
    • Each XMLHttpRequest object has a property named readyState , which holds the status of the server's response.
    • The event handler onreadystatechange is invoked whenever the value of readyState changes.
  • Step 3: Setting a call-back function
    • Here are the possible values for the readyState property:
    • To only process the response when the request is completed, one could write the call-back function as
    • xmlhttp.onreadystatechange = function() {
    • if (xmlhttp.readyState == 4) {
    • // Code to handle the response here
    • }
    • }
    The request is complete 4 The request is in process 3 The request has been sent 2 The request has been set up 1 The request is not initialized 0 Description State
  • Step 4: Send the request
    • xmlhttp.send(payload);
    • Makes the connection to the URL specified in open()
    • If request is asynchronous, this call returns immediately. Otherwise this call blocks further execution until the requested resource has been fully downloaded.
    • If the request type is POST, payload (a string) will be sent as the body of the request. If nothing is to be sent or if request type is GET, then pass null to the method
  • Step 4: Send the request
    • To make a POST request, we will also need to set the &quot;Content-type&quot; header to let the server know how to handle the content.
    • e.g., to emulate form submission, we can write
    • xmlhttp.setRequestHeader(
    • 'Content-type',
    • 'application/x-www-form-urlencoded;charset=UTF-8;'
    • );
    • xmlhttp.send('param1=value1&param2=value2');
    • setRequestHeader() could also be used to set application-specific headers or override default headers.
  • Other XMLHttpRequest Methods
    • abort()
      • Cancel and stop the current request
    • getResponseHeader(&quot;header&quot;)
      • Returns the string value of a specified header in the response (e.g. &quot;Content-type&quot;)
      • Note: The specified header is case-insensitive
    • getAllResponseHeaders()
      • Returns all headers from the response in a single string
      • Useful for debugging or searching for a particular string in the header
  • XMLHttpRequest Properties
    • status
      • The HTTP status code from the server
      • e.g., 200 for OK, 404 for Not Found, etc.
    • statusText
      • The text version of the status
    • readyState
      • The state of the request
      • 0=uninitialized, 1=loading, 2=loaded, 3=interactive, and 4=complete
  • XMLHttpRequest Properties
    • responseText
      • Unparsed text of the response
    • responseXML
      • Response parsed into a DOM object; happens only if Content-type is text/xml .
    • onreadystatechange
      • Event handler that is called when readyState changes
  • <html><head> <script type=&quot;text/javascript&quot;> function changeDisplay() { var fileTF = document.getElementById(&quot;filename&quot;); var filename = fileTF.value; var request = new XMLHttpRequest(); request.open(&quot;GET&quot;, filename, true); request.onreadystatechange = function() { if (request.readyState == 4) { var area = document.getElementById(&quot;display&quot;); area.innerHTML = request.responseText; } } request.send(null); } </script> </head> <body> <form name=&quot;myForm&quot;> File to load: <input id=&quot;filename&quot; type=&quot;text&quot; value=&quot;&quot; /> <input type=&quot;button&quot; value=&quot;Load&quot; onclick=&quot;changeDisplay() &quot; /> </form> <div id=&quot;display&quot; style=&quot;background:cyan&quot;/> Ajax example </div> </body></html> Example: Load a file and display its content in a DIV element.
  • Cross-site XMLHttpRequest
    • XMLHttpRequest object can only send request to the same website.
    • To access web services or retrieve data from other sites, you need to write a server side script to serve as a proxy.
  • References
    • W3C Working Drawf: The XMLHttpRequest Object
      • http://www.w3.org/TR/XMLHttpRequest/
    • Wiki: XMLHttpRequest
      • http://en.wikipedia.org/wiki/XMLHttpRequest