Ajax Presentation


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Ajax Presentation

  1. 1. A synchronous J avaScript A nd X ML What? Why? How? Who?
  2. 2. Overview <ul><li>Web applications are based on request/response </li></ul><ul><li>During request process, nothing is displayed </li></ul>
  3. 3. Overview Please wait … Request Response Client Server
  4. 4. Overview: Traditional Web App. Life Cycle Request
  5. 5. Process Overview: Traditional Web App. Life Cycle Loading
  6. 6. Response Overview: Traditional Web App. Life Cycle
  7. 7. Overview <ul><li>To improve performance, you either: </li></ul><ul><ul><li>load everything & display required data (JavaScript) </li></ul></ul><ul><ul><li>OR </li></ul></ul><ul><ul><li>keep moving back and forth between client & server </li></ul></ul><ul><ul><li>An alternative way is to use AJAX . </li></ul></ul>
  8. 8. What? <ul><li>AJAX: Asynchronous JavaScript And XML </li></ul><ul><li>AJAX uses a XML to send and receive asynchronous requests/responses and then leverages presentation technologies ( JavaScript , DOM, HTML, and CSS) to process the response. </li></ul><ul><li>Most browsers support the necessary technology for AJAX. </li></ul>
  9. 9. <ul><li>AJAX enables you execute a server-side method through a JavaScript call, without requiring a browser refresh. </li></ul>What?
  10. 10. AJAX Web App. Life Cycle Request
  11. 11. Process AJAX Web App. Life Cycle Nothing here
  12. 12. Response AJAX Web App. Life Cycle
  13. 13. Real world example <ul><li>Falafel </li></ul><ul><li>& </li></ul><ul><li>Jumaa </li></ul>
  14. 14. Let us start cooking, I am HUNGRY! <ul><li>Ingredients: </li></ul><ul><ul><li>JavaScript To build client-side functionality (using DOM). </li></ul></ul><ul><ul><li>XMLHttpRequest object To enable JS to access the server asynchronously . </li></ul></ul><ul><ul><li>Server Side Technology To handle the request. The response will be XML . </li></ul></ul>
  15. 15. How (how to use AJAX)? <ul><li>Modify web.config </li></ul><ul><li>Register the web page </li></ul><ul><li>Use <Ajax.AjaxMethod()> attribute </li></ul><ul><li>Write JavaScript to handle the response </li></ul>
  16. 16. How (how to use AJAX)? Do not just tell me, show me a demo!
  17. 17. Who (who use AJAX)? <ul><li>Windows Live Mail ( http:// www.hotmail.com ) </li></ul><ul><li>Google </li></ul><ul><ul><li>Goole Mail ( http:// mail.google.com ) </li></ul></ul><ul><ul><li>Google Maps ( http:// maps.google.com ) </li></ul></ul><ul><ul><li>Google Suggests ( http://www.google.com/webhp?complete=1&hl=en ) </li></ul></ul><ul><li>Yahoo! Flickr ( http://www.flickr.com ) </li></ul><ul><li>Meebo ( http:// www.meebo.com ) </li></ul><ul><li>… Who’s next (you???) </li></ul>
  18. 18. Who (who uses AJAX)?
  19. 19. FAQ <ul><li>What data types does AJAX support? </li></ul><ul><ul><li>AJAX supports: </li></ul></ul><ul><ul><ul><li>Primitive types of custom classes and arrays </li></ul></ul></ul><ul><ul><ul><li>integers, strings, double, booleans, DateTime, DataSets and DataTables </li></ul></ul></ul><ul><ul><ul><li>All other types have their ToString values returned </li></ul></ul></ul><ul><li>What about Session s? </li></ul><ul><ul><li>AJAX supports Session read and write </li></ul></ul>
  20. 20. Why (why to use AJAX)? <ul><li>Faster web actions </li></ul><ul><li>Less (or no) page refreshes </li></ul><ul><li>Reduce network traffic </li></ul><ul><li>Decreased server-side bandwidth usage </li></ul><ul><li>Web apps that rival (or surpass) installed GUI apps </li></ul>
  21. 21. Why (why not to use AJAX)? <ul><li>Bye bye, bookmarks! </li></ul><ul><li>Search engines may not be able to index all pages. </li></ul><ul><li>Inaccurate Back & Forward button actions. </li></ul><ul><li>JavaScript can be easily disabled from client side. </li></ul>
  22. 22. Do not reinvent the wheel, <ul><li>Many AJAX frameworks are available now: </li></ul><ul><li>AJAX.Net </li></ul><ul><li>Abobe (Spry). </li></ul><ul><li>Google (Google Web Toolkit). </li></ul><ul><li>Microsoft (Atlas). </li></ul><ul><li>… others are coming. </li></ul>
  23. 23. AJAX.Net <ul><li>Server Side Code </li></ul><ul><li>[AjaxMethod] public DataSet GetDataSet(){ </li></ul><ul><li>DataSet ds = new DataSet(); </li></ul><ul><li>... </li></ul><ul><li>return ds; </li></ul><ul><li>} </li></ul>
  24. 24. AJAX.Net <ul><li>Client Side Code </li></ul><ul><li>function doTest1(){ AJAXDemo. GetDataSet(_callback1); </li></ul><ul><li>} </li></ul><ul><li>function _callback1(res){ var cols = res.value.Tables[0].Columns.length; </li></ul><ul><li>var rows = res.value.Tables[0].Rows.length; alert(cols + &quot; cols and &quot; + rows + &quot; rows&quot;); </li></ul><ul><li>} </li></ul>
  25. 25. AJAX.Net <ul><li>Dataset ( Creating a client-side DataSet using JS ) </li></ul><ul><li>var ds = new Ajax.Web.DataSet(); </li></ul><ul><li>var dt = new Ajax.Web.DataTable(); </li></ul><ul><li>dt.addColumn(&quot;FirstName&quot;, &quot;System.String&quot;); </li></ul><ul><li>dt.addColumn(&quot;Age&quot;, &quot;System.Int32&quot;); </li></ul><ul><li>dt.addRow({&quot;FirstName&quot;:&quot;Michael&quot;,&quot;Age&quot;:28}); </li></ul><ul><li>dt.addRow({&quot;FirstName&quot;:&quot;Tanja&quot;,&quot;Age&quot;:25}); </li></ul><ul><li>ds.addTable(dt); </li></ul>
  26. 26. AJAX.Net <ul><li>Dataset ( Creating a client-side DataSet using JS ) </li></ul><ul><ul><li>dt.addRow({&quot;FirstName&quot;:&quot;Michael&quot;,&quot;Age&quot;:28}); </li></ul></ul><ul><ul><li>// or using an object </li></ul></ul><ul><ul><li>var row = new Object(); </li></ul></ul><ul><ul><li>row.FirstName = &quot;Michael&quot;; </li></ul></ul><ul><ul><li>row.Age = 28; </li></ul></ul><ul><li>dt.addRow(row); </li></ul>
  27. 27. One Day <ul><li>AJAX is not the end, </li></ul>one day you will look at this technology and LAUGH !!!