Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
AJAX Introduction By Oliver Cai Oct 17, 2006
What does it mean? <ul><li>AJAX  </li></ul><ul><li>shorthand for  Asynchronous   JavaScript  and  XML , is a  web developm...
Defining Ajax <ul><li>Ajax is a set of technologies being used together in a particular way. It is the software bundle, it...
How does Ajax work? <ul><ul><li>Use client-side scripting for layout and formatting </li></ul></ul><ul><ul><li>Use less th...
 
 
Upstream Options <ul><ul><li>GETs and Form POSTs </li></ul></ul><ul><ul><li>SOAP envelope </li></ul></ul><ul><ul><li>XML <...
Downstream Options <ul><ul><li>XML </li></ul></ul><ul><ul><li>JSON </li></ul></ul><ul><ul><li>Full Javascript </li></ul></...
Advantages of Ajax <ul><li>Bandwidth utilization </li></ul><ul><li>  G enerating the HTML locally within the browser, and ...
Drawbacks of Ajax <ul><li>- If JavaScript is not activated, Ajax can't works.  </li></ul><ul><li>- Since data to display a...
Who’s Using Ajax <ul><li>Google is making a huge investment in developing the Ajax approach.  </li></ul><ul><li>Ajax appli...
Ajax’s Specifications <ul><li>Ajax is based on these specifications: - XML 1, HTML 4.0, DOM 2, from W3C  - ECMAScript 1.5 ...
Ajax methods’ providers <ul><ul><li>XMLHttpRequest(API) or XMLHTTP(ActiveX) </li></ul></ul><ul><ul><li>Invisible  inline f...
XMLHttpRequest  ( XHR )  <ul><li>It is an  API  that can be used by  JavaScript ,  JScript ,  VBScript  and other  web bro...
XHR’s Methods <ul><li>abort()  : Cancels the current request </li></ul><ul><li>getResponseHeader(headerName)  : Returns th...
Framework & Toolkit <ul><li>Dojo Toolkit /Clean AJAX /SAJAX </li></ul><ul><li>DWR  (Direct  Web Remoting) </li></ul><ul><l...
XHR’s Properties <ul><li>onreadystatechange : An event handler for an event that fires at every state change. </li></ul><u...
<ul><li>function createXMLHttp(){ </li></ul><ul><li>if (typeof XMLHttpRequest !=&quot;undefined&quot;){ </li></ul><ul><li>...
<ul><li>function getServerInfo(){ </li></ul><ul><ul><ul><li>Var oXMLHttp = CreateXMLHttp(); </li></ul></ul></ul><ul><ul><u...
JSON’s “POST” <ul><li>function getServerInfo(){ </li></ul><ul><ul><ul><li>Var oXMLHttp = CreateXMLHttp(); </li></ul></ul><...
Create POST sending data <ul><li>Function getRequestBody(oForm){ </li></ul><ul><li>var aParams = new Array(); </li></ul><u...
Links <ul><li>AutoSuggestion </li></ul><ul><li>http://localhost/test/auto/autosuggestexample.htm </li></ul><ul><li>Notific...
Upcoming SlideShare
Loading in …5
×

Ajax Introduction

1,349 views

Published on

Ajax introduction for beginner

  • Be the first to comment

Ajax Introduction

  1. 1. AJAX Introduction By Oliver Cai Oct 17, 2006
  2. 2. What does it mean? <ul><li>AJAX </li></ul><ul><li>shorthand for Asynchronous JavaScript and XML , is a web development technique for creating interactive web applications . </li></ul><ul><li>* The first use of the term in public was by Jesse James Garrett in February 2005. </li></ul>
  3. 3. Defining Ajax <ul><li>Ajax is a set of technologies being used together in a particular way. It is the software bundle, it incorporates: </li></ul><ul><ul><li>standards-based presentation using XHTML and CSS; </li></ul></ul><ul><ul><li>dynamic display and interaction using the Document Object Model ; </li></ul></ul><ul><ul><li>data interchange and manipulation using XML and XSLT ; </li></ul></ul><ul><ul><li>asynchronous data retrieval using XMLHttpRequest ; </li></ul></ul><ul><ul><li>and JavaScript binding everything together. </li></ul></ul>
  4. 4. How does Ajax work? <ul><ul><li>Use client-side scripting for layout and formatting </li></ul></ul><ul><ul><li>Use less than full page reloads to change content </li></ul></ul><ul><ul><li>Use data formats other than HTML </li></ul></ul><ul><ul><li>Interact asynchronously with the server </li></ul></ul>
  5. 7. Upstream Options <ul><ul><li>GETs and Form POSTs </li></ul></ul><ul><ul><li>SOAP envelope </li></ul></ul><ul><ul><li>XML </li></ul></ul><ul><ul><li>JAVA remoting </li></ul></ul>
  6. 8. Downstream Options <ul><ul><li>XML </li></ul></ul><ul><ul><li>JSON </li></ul></ul><ul><ul><li>Full Javascript </li></ul></ul><ul><ul><li>Javascript Arrays </li></ul></ul><ul><ul><li>Custom Serialization Frameworks </li></ul></ul><ul><ul><li> (such as: Atlas, Google Web Tookkit) </li></ul></ul>
  7. 9. Advantages of Ajax <ul><li>Bandwidth utilization </li></ul><ul><li> G enerating the HTML locally within the browser, and only bringing down JavaScript calls and the actual data . </li></ul><ul><li>Interactivity </li></ul><ul><li> 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 </li></ul><ul><li>Examples: updating or deleting records; expanding web forms; returning simple search queries; or editing category trees </li></ul>
  8. 10. Drawbacks of Ajax <ul><li>- If JavaScript is not activated, Ajax can't works. </li></ul><ul><li>- 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) </li></ul>
  9. 11. Who’s Using Ajax <ul><li>Google is making a huge investment in developing the Ajax approach. </li></ul><ul><li>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) </li></ul>
  10. 12. Ajax’s Specifications <ul><li>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 . </li></ul>
  11. 13. Ajax methods’ providers <ul><ul><li>XMLHttpRequest(API) or XMLHTTP(ActiveX) </li></ul></ul><ul><ul><li>Invisible inline frames or iframes (pure Javascript) </li></ul></ul><ul><ul><li>Netscape's LiveConnect </li></ul></ul><ul><ul><li>Microsoft's ActiveX </li></ul></ul><ul><ul><li>Microsoft's XML Data Islands </li></ul></ul><ul><ul><li>Macromedia Flash Player </li></ul></ul><ul><ul><li>Java Applets </li></ul></ul>
  12. 14. XMLHttpRequest ( XHR ) <ul><li>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 . </li></ul>
  13. 15. XHR’s Methods <ul><li>abort() : Cancels the current request </li></ul><ul><li>getResponseHeader(headerName) : Returns the value of the specified HTTP header </li></ul><ul><li>open( method, URL, async ) : </li></ul><ul><li>“ method” parameter can have a value of &quot;GET&quot;, &quot;POST&quot;, or &quot;HEAD&quot;. Other HTTP methods, such as &quot;PUT&quot; and &quot;DELETE&quot; (primarily used in REST applications), may be possible. </li></ul><ul><li>“ URL” parameter may be either a relative or complete URL. &quot;async&quot; parameter specifies whether the request should be handled asynchronously or not. </li></ul><ul><li>send( content ) : Sends the request. </li></ul><ul><li>setRequestHeader( label, value ) : Adds a label/value pair to the HTTP header to be sent. </li></ul>
  14. 16. Framework & Toolkit <ul><li>Dojo Toolkit /Clean AJAX /SAJAX </li></ul><ul><li>DWR (Direct Web Remoting) </li></ul><ul><li>AJAX-enabled JSF Components </li></ul><ul><li>Google Web Toolkit(GWT) </li></ul><ul><li>ASP.NET Ajax /Ajax.NET Professional </li></ul>
  15. 17. XHR’s Properties <ul><li>onreadystatechange : An event handler for an event that fires at every state change. </li></ul><ul><li>readyState : Returns the state of the object as follows: 0 = uninitialized, 1 = open, 2 = sent, 3 = receiving and 4 = loaded. </li></ul><ul><li>responseText : Returns the response as a string. </li></ul><ul><li>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. </li></ul><ul><li>status : Returns the status as a number (e.g. 404 for &quot;Not Found&quot; and 200 for &quot;OK&quot;) </li></ul><ul><li>statusText : Returns the status as a string (e.g. &quot;Not Found&quot; or &quot;OK&quot;). </li></ul>
  16. 18. <ul><li>function createXMLHttp(){ </li></ul><ul><li>if (typeof XMLHttpRequest !=&quot;undefined&quot;){ </li></ul><ul><li>return new XMLHttpRequest(); </li></ul><ul><li>} </li></ul><ul><li>else if (window.ActiveXObject){ </li></ul><ul><li>return new ActiveXObject(“MSXML2.XMLHttp.5.0”); </li></ul><ul><li>} </li></ul><ul><li>throw new Error(&quot;XMLHttp object could be created.&quot;); </li></ul><ul><li>} </li></ul>Implementation Create Communication Object for cross-platform browsers
  17. 19. <ul><li>function getServerInfo(){ </li></ul><ul><ul><ul><li>Var oXMLHttp = CreateXMLHttp(); </li></ul></ul></ul><ul><ul><ul><li>Var sURL=“serverresponse.php?”; </li></ul></ul></ul><ul><ul><ul><li>oXMLHttp.open(&quot;GET&quot;, sURL, true ); </li></ul></ul></ul><ul><ul><ul><li>oXMLHttp.onreadystatechange= function(){ </li></ul></ul></ul><ul><ul><ul><li>if( oXMLHttp.readyState ==4){ </li></ul></ul></ul><ul><ul><ul><li>if(oXMLHttp.status ==200){ </li></ul></ul></ul><ul><ul><ul><li>showInfo(oXMLHttp.responseText); </li></ul></ul></ul><ul><ul><ul><li>}else{ </li></ul></ul></ul><ul><ul><ul><li>showInfo(&quot;An error occurred”); </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>oXMLHttp.send(null); //send the request </li></ul></ul></ul><ul><li>} </li></ul>Simple “GET”
  18. 20. JSON’s “POST” <ul><li>function getServerInfo(){ </li></ul><ul><ul><ul><li>Var oXMLHttp = CreateXMLHttp(); </li></ul></ul></ul><ul><ul><ul><li>Var sURL=“serverresponse.php”; </li></ul></ul></ul><ul><ul><ul><li>Var oData={ items1:”values”,items2::”values”}; //define the data </li></ul></ul></ul><ul><ul><ul><li>oXMLHttp.open(“POST&quot;, sURL, true ); </li></ul></ul></ul><ul><ul><ul><li>oXMLHttp.onreadystatechange= function(){ </li></ul></ul></ul><ul><ul><ul><li>if( oXMLHttp.readyState ==4){ </li></ul></ul></ul><ul><ul><ul><li>if(oXMLHttp.status ==200){ </li></ul></ul></ul><ul><ul><ul><ul><ul><li>var aGetInfo = JSON.parse(oXMLHttp.responseText); </li></ul></ul></ul></ul></ul><ul><ul><ul><li>showInfo(aGetInfo); //show info </li></ul></ul></ul><ul><ul><ul><li>}else{ </li></ul></ul></ul><ul><ul><ul><li>showInfo(&quot;An error occurred”); </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>oXMLHttp.send(JSON.stringify(oData)); //sent the request </li></ul></ul></ul><ul><li>} </li></ul><ul><li>* At back-end, JSON.encode or JSON.decode for data </li></ul>
  19. 21. Create POST sending data <ul><li>Function getRequestBody(oForm){ </li></ul><ul><li>var aParams = new Array(); </li></ul><ul><li>for (var i=0; i< oForm.elements.length;i++){ </li></ul><ul><li>var sParams = encodeURIComponent(oForm.elements[i].name); </li></ul><ul><li>sParams += “=”; </li></ul><ul><li>sParams += encodeURIComponent(oForm.elements[i].value); </li></ul><ul><li>aParams.push(sParams); </li></ul><ul><li>} </li></ul><ul><li>return aParams.join(“&”); </li></ul><ul><li>} </li></ul>
  20. 22. Links <ul><li>AutoSuggestion </li></ul><ul><li>http://localhost/test/auto/autosuggestexample.htm </li></ul><ul><li>Notification </li></ul><ul><li>http://localhost/test/newnotify/ordernotify.php </li></ul><ul><li>Star </li></ul><ul><li>http://localhost/test/admin/sample_new.php </li></ul>

×