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,125
-1

Published on

Ajax introduction for beginner

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

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

No notes for slide

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>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×