Your SlideShare is downloading. ×
AJAX
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

AJAX

1,293
views

Published on

Introduction to Asynchronous JavaScript and XML

Introduction to Asynchronous JavaScript and XML

Published in: Technology

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,293
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 1. INTRODUCTION TO AJAX By: Ankur Gupta B.E. Final Yr. (I.T.) JECRC, Jodhpur
    • 2. Introduction
      • Stands for “Asynchronous JavaScript and XML “
      • Development technique for creating interactive web applications
      • Not a new Technology but more of a Pattern
    • 3. Motivation NEEDs
      • WebPages can be UPDATED without RELOADING.
      • Single piece of data can be loaded without reloading of entire webpage
      • Multiple HTTP request/response can be processed.
    • 4. Roots of AJAX
      • Originally developed by Microsoft as XMLHttp for IE 5.0.
      • Mozilla 1.0 had the first native implementation of XMLHttpRequest in 2002.
      • Soon followed by Safari, Opera and others.
    • 5. Roots of AJAX contd..
      • This technique was named AJAX in 2005 by James Garret.
      • W3C standardized XMLHTTPRequest object API in 2006.
    • 6. Role of AJAX in Web 2.0
      • Core features of Web 2.0
        • Web as a Platform
        • Collective Intelligence
        • Above the level of Single Device
        • Services , not packaged software
        • Rich User experiences
      • AJAX
        • Assists in User Interfaces
        • Less machine readable / linkable webpages
    • 7. Uses of AJAX Paradigm
      • Real-Time Form Data Validation
        • Form data that require server-side validation can be validated in a form “before” the user submits it.
      • Auto completion
        • A specific portion of form data may be auto-completed as the user types.
    • 8. Uses of AJAX Paradigm contd..
      • On Demand Loading
        • Based on a client event, an HTML page can fetch more detailed information on data without refreshing the page.
      • Refreshing data and server push:
        • HTML pages may poll data from a server for up-to-date data such as scores, stock quotes, weather, or application-specific data.
        • Sophisticated UI Controls
        • Controls such as tree controls, menus, and progress bars may be provided without page refreshes.
    • 9. Components
        • HTML (or XHTML) and CSS
          • Presenting information
        • Document Object Model
          • Dynamic display and interaction with the information
        • XMLHttpRequest object
          • Retrieving data ASYNCHRONOUSLY from the web server .
        • Javascript
          • Binding everything together
    • 10. Web Application and AJAX
    • 11. Request Processing
    • 12. AJAX Architecture
      • Create an XMLHttpRequest object
      • Make a HTTP request to the server
      • Register your callback function for
      • handling the response
      • Handle the response, check for return
      • status
      • Parse the response on success, display
      • result
    • 13. Example using XMLHttpRequest – Step 1
      • Create Object
        • Objects are Browser Specific.
      • Example
        • var requester = new ActiveXObject("Microsoft.XMLHTTP"); (for IE 5 & IE 6 browsers)
        • var requester = new XMLHttpRequest();
        • (for firefox, mozilla & others)
    • 14. Using XMLHttpRequest – Step 2
      • Transferring data to Server
        • Open() to initialize connection to Server
        • Send() to send the actual Data
      • Example
        • requester.open("POST", "/query.cgi“,true)
        • requester.send("name=Bob&email=bob@example.com");
      METHOD PATH CONNECTION TYPE
    • 15. What happens after sending data ?
      • XMLHttpRequest contacts the server and retrieves the data
        • Can take indeterminate amount of time
      • Event Listener to determine when the object has finished retrieving data
        • Specifically listen for changes in “readyState” variable
    • 16. Using XMLHttpRequest – Step 3
      • Set up a function to handle the event when the readyState is changed to 4
        • 0 – Uninitialised
        • 1 – open
        • 2 – sent
        • 3 – receiving
        • 4 – Completed
      • Example
        • requester.onreadystatechange = stateHandler;
    • 17. Using XMLHttpRequest – Step 3 Contd
      • Check whether the XMLHttpRequest object successfully retrieved the data, or give an error code
      • Example
        • if (requester.readyState == 4)  {   if (requester.status == 200)   {    success(); }
          • }
    • 18. Using XMLHttpRequest – Step 4
      • Parse and display data
        • responseXML
        • responseText
      • Example
        • var nameNode = requester.responseXML.getElementsByTagName("name")[0];
        • var nameTextNode = nameNode.childNodes[0];
        • var name = nameTextNode.nodeValue;
    • 19. SAMPLE CODE
      • var xhr = new XMLHttpRequest();
      • xhr.onreadystatechange = function () {
      • if (xhr.readyState == 4) {
      • if (xhr.status == 200) {
      • // success, process data
      • }
      • }
      • };
      • xhr.open(“GET”, “http://www.foo.com/bar”, true);
      • xhr.send(null);
    • 20. Advantages
      • Rich User Interface
      • Highly Responsive
      • Lower Bandwidth Usage
      • Separation of content, formatting, and behavior
    • 21. Problems
      • Breaking the “back” button
        • Browsers record static page visits
        • Can’t see previous content of same page.
        • Invisible IFrames can invoke changes that populate the history
      • Book marking a particular “State” becomes difficult
        • JavaScript generates the page NOT found server error
    • 22. Problems Contd..
      • Increase in the code size on browser
        • Response time affected
      • Difficult to debug
        • Processing logic both in client and server
      • Viewable Source
        • Open to hackers or plagiarism
      • Server Load
        • Asynchronous request is a “heavy” operation
    • 23. Ajax Libraries and Frameworks
      • dojo Toolkit
      • Google Web Toolkit
      • Microsoft Atlas
      • Prototype
      • Script.aculo.us
      • YUI
      • and a lot more ...
    • 24. Who is using AJAX ?
    • 25. Reading Material
      • Overview
        • http://en.wikipedia.org/wiki/AJAX
        • http://java.sun.com/developer/technicalArticles/J2EE/AJAX/index.html?cid=59754
      • Original Article from Adaptive path
        • http://www.adaptivepath.com/publications/essays/archives/000385.php
      • Examples
        • http://www.sitepoint.com/article/remote-scripting-ajax.html
        • http://www.mousewhisperer.co.uk/ajax_page.html
        • http://www.clearnova.com/ajax/
        • http://www.webpasties.com/xmlHttpRequest/
      • AJAX based Applications
        • http://www.ajaxreview.com/
        • http://ajaxblog.com/
      • Issues/Problems
        • http://sourcelabs.com/ajb/archives/2005/05/ajax_mistakes.html
    • 26. Thank You
      • Questions ?