AJAX - Quick Introduction
Upcoming SlideShare
Loading in...5

AJAX - Quick Introduction






Total Views
Views on SlideShare
Embed Views



1 Embed 4

http://www.slideshare.net 4



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 - Quick Introduction Presentation Transcript

  • 1. AJAX Quick Introduction
  • 2. AJAX = Asynchronous JavaScript A nd XML
  • 3. What is AJAX, actually?
      • Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:
        • standards-based presentation using XHTML and CSS;
        • dynamic display and interaction using the Document Object Model ;
        • data interchange and manipulation using XML and XSLT ;
        • asynchronous data retrieval using XMLHttpRequest ;
        • and JavaScript binding everything together.
  • 4.  
  • 5. How Ajax is Different
      • An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web by introducing an intermediary — an Ajax engine — between the user and the server. It seems like adding a layer to the application would make it less responsive, but the opposite is true.
      • Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine — written in JavaScript and usually tucked away in a hidden frame. This engine is responsible for both rendering the interface the user sees and communicating with the server on the user’s behalf.
      • The Ajax engine allows the user’s interaction with the application to happen asynchronously — independent of communication with the server. So the user is never staring at a blank browser window and an hourglass icon, waiting around for the server to do something.
  • 6.  
  • 7. Is AJAX production-ready?
      • The biggest challenges in creating Ajax applications are not technical. The core Ajax technologies are mature, stable, and well understood. Instead, the challenges are for the designers of these applications: to forget what we think we know about the limitations of the Web, and begin to imagine a wider, richer range of possibilities.
  • 8. How does it look in code?
      • Step 1 – How to Make an HTTP Request
      • var httpRequest;
      • if (window.XMLHttpRequest) { // Mozilla, Safari, ... httpRequest = new XMLHttpRequest(); }
      • else if (window.ActiveXObject) { // IE httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }
  • 9. How does it look in code?
      • Step 2 – Handling server response
      • if (httpRequest.readyState == 4) { // everything is good, the response is received }
      • else { // still not ready }
  • 10. How does it look in code?
      • A simple example
        • The user clicks the link "Make a request" in the browser;
        • This calls the makeRequest() function with a parameter – the name test.html of an HTML file in the same directory;
        • The request is made and then (onreadystatechange) the execution is passed to alertContents();
        • alertContents() checks if the response was received and it's an OK and then alert()s the contents of the test.html file.
  • 11.