Your SlideShare is downloading. ×
Ajax Introduction
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ajax Introduction

1,005

Published on

Ajax introduction for beginner

Ajax introduction for beginner

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,005
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
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. AJAX Introduction By Oliver Cai Oct 17, 2006
  • 2. What does it mean?
    • AJAX
    • shorthand for Asynchronous JavaScript and XML , is a web development technique for creating interactive web applications .
    • * The first use of the term in public was by Jesse James Garrett in February 2005.
  • 3. Defining Ajax
    • Ajax is a set of technologies being used together in a particular way. It is the software bundle, it 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. How does Ajax work?
      • Use client-side scripting for layout and formatting
      • Use less than full page reloads to change content
      • Use data formats other than HTML
      • Interact asynchronously with the server
  • 5.  
  • 6.  
  • 7. Upstream Options
      • GETs and Form POSTs
      • SOAP envelope
      • XML
      • JAVA remoting
  • 8. Downstream Options
      • XML
      • JSON
      • Full Javascript
      • Javascript Arrays
      • Custom Serialization Frameworks
      • (such as: Atlas, Google Web Tookkit)
  • 9. Advantages of Ajax
    • Bandwidth utilization
    • G enerating the HTML locally within the browser, and only bringing down JavaScript calls and the actual data .
    • Interactivity
    • Ajax can be used for all without the requirement to fetch a full page of HTML each time a change is made. it extends the browser with lightweight mini-applications
    • Examples: updating or deleting records; expanding web forms; returning simple search queries; or editing category trees
  • 10. Drawbacks of Ajax
    • - If JavaScript is not activated, Ajax can't works.
    • - Since data to display are loaded dynamically, they are not part of the page, and the keywords inside are not used by search engines. - The asynchronous mode may change the page with delays (when the processing on the server take some times), this may be disturbing. - The back button may be deactivated (for ie 6.0 and earlier)
  • 11. Who’s Using Ajax
    • Google is making a huge investment in developing the Ajax approach.
    • Ajax applications can be any size, from the very simple, single-function Google Suggest to the very complex and sophisticated Google Maps (also using at A9, MS Outlook)
  • 12. Ajax’s Specifications
    • Ajax is based on these specifications: - XML 1, HTML 4.0, DOM 2, from W3C - ECMAScript 1.5 (standard for JavaScript) from ECMA. - W3C draft specification for XMLHttpRequest .
  • 13. Ajax methods’ providers
      • XMLHttpRequest(API) or XMLHTTP(ActiveX)
      • Invisible inline frames or iframes (pure Javascript)
      • Netscape's LiveConnect
      • Microsoft's ActiveX
      • Microsoft's XML Data Islands
      • Macromedia Flash Player
      • Java Applets
  • 14. XMLHttpRequest ( XHR )
    • It is an API that can be used by JavaScript , JScript , VBScript and other web browser scripting languages to transfer and manipulate XML data to and from a web server using HTTP , establishing an independent connection channel between a web page's Client-Side and Server-Side .
  • 15. XHR’s Methods
    • abort() : Cancels the current request
    • getResponseHeader(headerName) : Returns the value of the specified HTTP header
    • open( method, URL, async ) :
    • “ method” parameter can have a value of "GET", "POST", or "HEAD". Other HTTP methods, such as "PUT" and "DELETE" (primarily used in REST applications), may be possible.
    • “ URL” parameter may be either a relative or complete URL. "async" parameter specifies whether the request should be handled asynchronously or not.
    • send( content ) : Sends the request.
    • setRequestHeader( label, value ) : Adds a label/value pair to the HTTP header to be sent.
  • 16. Framework & Toolkit
    • Dojo Toolkit /Clean AJAX /SAJAX
    • DWR (Direct Web Remoting)
    • AJAX-enabled JSF Components
    • Google Web Toolkit(GWT)
    • ASP.NET Ajax /Ajax.NET Professional
  • 17. XHR’s Properties
    • onreadystatechange : An event handler for an event that fires at every state change.
    • readyState : Returns the state of the object as follows: 0 = uninitialized, 1 = open, 2 = sent, 3 = receiving and 4 = loaded.
    • responseText : Returns the response as a string.
    • responseXML : Returns the response as XML. This property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties.
    • status : Returns the status as a number (e.g. 404 for "Not Found" and 200 for "OK")
    • statusText : Returns the status as a string (e.g. "Not Found" or "OK").
  • 18.
    • function createXMLHttp(){
    • if (typeof XMLHttpRequest !="undefined"){
    • return new XMLHttpRequest();
    • }
    • else if (window.ActiveXObject){
    • return new ActiveXObject(“MSXML2.XMLHttp.5.0”);
    • }
    • throw new Error("XMLHttp object could be created.");
    • }
    Implementation Create Communication Object for cross-platform browsers
  • 19.
    • function getServerInfo(){
        • Var oXMLHttp = CreateXMLHttp();
        • Var sURL=“serverresponse.php?”;
        • oXMLHttp.open("GET", sURL, true );
        • oXMLHttp.onreadystatechange= function(){
        • if( oXMLHttp.readyState ==4){
        • if(oXMLHttp.status ==200){
        • showInfo(oXMLHttp.responseText);
        • }else{
        • showInfo("An error occurred”);
        • }
        • }
        • }
        • oXMLHttp.send(null); //send the request
    • }
    Simple “GET”
  • 20. JSON’s “POST”
    • function getServerInfo(){
        • Var oXMLHttp = CreateXMLHttp();
        • Var sURL=“serverresponse.php”;
        • Var oData={ items1:”values”,items2::”values”}; //define the data
        • oXMLHttp.open(“POST", sURL, true );
        • oXMLHttp.onreadystatechange= function(){
        • if( oXMLHttp.readyState ==4){
        • if(oXMLHttp.status ==200){
            • var aGetInfo = JSON.parse(oXMLHttp.responseText);
        • showInfo(aGetInfo); //show info
        • }else{
        • showInfo("An error occurred”);
        • }
        • }
        • }
        • oXMLHttp.send(JSON.stringify(oData)); //sent the request
    • }
    • * At back-end, JSON.encode or JSON.decode for data
  • 21. Create POST sending data
    • Function getRequestBody(oForm){
    • var aParams = new Array();
    • for (var i=0; i< oForm.elements.length;i++){
    • var sParams = encodeURIComponent(oForm.elements[i].name);
    • sParams += “=”;
    • sParams += encodeURIComponent(oForm.elements[i].value);
    • aParams.push(sParams);
    • }
    • return aParams.join(“&”);
    • }
  • 22. Links
    • AutoSuggestion
    • http://localhost/test/auto/autosuggestexample.htm
    • Notification
    • http://localhost/test/newnotify/ordernotify.php
    • Star
    • http://localhost/test/admin/sample_new.php

×