Ajax Introduction
Upcoming SlideShare
Loading in...5
×
 

Ajax Introduction

on

  • 1,364 views

Ajax introduction for beginner

Ajax introduction for beginner

Statistics

Views

Total Views
1,364
Views on SlideShare
1,362
Embed Views
2

Actions

Likes
1
Downloads
0
Comments
0

1 Embed 2

http://www.slideshare.net 2

Accessibility

Categories

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.

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

    Ajax Introduction Ajax Introduction Presentation Transcript

    • AJAX Introduction By Oliver Cai Oct 17, 2006
    • 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.
    • 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.
    • 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
    •  
    •  
    • Upstream Options
        • GETs and Form POSTs
        • SOAP envelope
        • XML
        • JAVA remoting
    • Downstream Options
        • XML
        • JSON
        • Full Javascript
        • Javascript Arrays
        • Custom Serialization Frameworks
        • (such as: Atlas, Google Web Tookkit)
    • 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
    • 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)
    • 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)
    • 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 .
    • 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
    • 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 .
    • 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.
    • 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
    • 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").
      • 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
      • 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”
    • 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
    • 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(“&”);
      • }
    • Links
      • AutoSuggestion
      • http://localhost/test/auto/autosuggestexample.htm
      • Notification
      • http://localhost/test/newnotify/ordernotify.php
      • Star
      • http://localhost/test/admin/sample_new.php