AJAX allows asynchronous data retrieval from a server without page refreshes. It uses XMLHttpRequest objects in JavaScript to make requests to the server and update parts of the page without reloading. Common uses of AJAX include Gmail, Google Maps, and Flickr. It provides a faster and more responsive web experience compared to traditional page loads. Frameworks like AJAX.NET help implement AJAX functionality on both the client-side and server-side.

1. A synchronous J avaScript A nd X ML What? Why? How? Who?

2. Overview Web applications are based on request/response During request process, nothing is displayed

3. Overview Please wait … Request Response Client Server

4. Overview: Traditional Web App. Life Cycle Request

5. Process Overview: Traditional Web App. Life Cycle Loading

6. Response Overview: Traditional Web App. Life Cycle

7. Overview To improve performance, you either: load everything & display required data (JavaScript) OR keep moving back and forth between client & server An alternative way is to use AJAX .

8. What? AJAX: Asynchronous JavaScript And XML 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. Most browsers support the necessary technology for AJAX.

9. AJAX enables you execute a server-side method through a JavaScript call, without requiring a browser refresh. What?

10. AJAX Web App. Life Cycle Request

11. Process AJAX Web App. Life Cycle Nothing here

12. Response AJAX Web App. Life Cycle

13. Real world example Falafel & Jumaa

14. Let us start cooking, I am HUNGRY! Ingredients: JavaScript To build client-side functionality (using DOM). XMLHttpRequest object To enable JS to access the server asynchronously . Server Side Technology To handle the request. The response will be XML .

15. How (how to use AJAX)? Modify web.config Register the web page Use <Ajax.AjaxMethod()> attribute Write JavaScript to handle the response

16. How (how to use AJAX)? Do not just tell me, show me a demo!

17. Who (who use AJAX)? Windows Live Mail ( http:// www.hotmail.com ) Google Goole Mail ( http:// mail.google.com ) Google Maps ( http:// maps.google.com ) Google Suggests ( http://www.google.com/webhp?complete=1&hl=en ) Yahoo! Flickr ( http://www.flickr.com ) Meebo ( http:// www.meebo.com ) … Who’s next (you???)

18. Who (who uses AJAX)?

19. FAQ What data types does AJAX support? AJAX supports: Primitive types of custom classes and arrays integers, strings, double, booleans, DateTime, DataSets and DataTables All other types have their ToString values returned What about Session s? AJAX supports Session read and write

20. Why (why to use AJAX)? Faster web actions Less (or no) page refreshes Reduce network traffic Decreased server-side bandwidth usage Web apps that rival (or surpass) installed GUI apps

21. Why (why not to use AJAX)? Bye bye, bookmarks! Search engines may not be able to index all pages. Inaccurate Back & Forward button actions. JavaScript can be easily disabled from client side.

22. Do not reinvent the wheel, Many AJAX frameworks are available now: AJAX.Net Abobe (Spry). Google (Google Web Toolkit). Microsoft (Atlas). … others are coming.

23. AJAX.Net Server Side Code [AjaxMethod] public DataSet GetDataSet(){ DataSet ds = new DataSet(); ... return ds; }

24. AJAX.Net Client Side Code function doTest1(){ AJAXDemo. GetDataSet(_callback1); } function _callback1(res){ var cols = res.value.Tables[0].Columns.length; var rows = res.value.Tables[0].Rows.length; alert(cols + &quot; cols and &quot; + rows + &quot; rows&quot;); }

25. AJAX.Net Dataset ( Creating a client-side DataSet using JS ) var ds = new Ajax.Web.DataSet(); var dt = new Ajax.Web.DataTable(); dt.addColumn(&quot;FirstName&quot;, &quot;System.String&quot;); dt.addColumn(&quot;Age&quot;, &quot;System.Int32&quot;); dt.addRow({&quot;FirstName&quot;:&quot;Michael&quot;,&quot;Age&quot;:28}); dt.addRow({&quot;FirstName&quot;:&quot;Tanja&quot;,&quot;Age&quot;:25}); ds.addTable(dt);

26. AJAX.Net Dataset ( Creating a client-side DataSet using JS ) dt.addRow({&quot;FirstName&quot;:&quot;Michael&quot;,&quot;Age&quot;:28}); // or using an object var row = new Object(); row.FirstName = &quot;Michael&quot;; row.Age = 28; dt.addRow(row);

27. One Day AJAX is not the end, one day you will look at this technology and LAUGH !!!