![AJAX.Net Server Side Code [AjaxMethod] public DataSet GetDataSet(){ DataSet ds = new DataSet(); ... return ds; }](https://image.slidesharecdn.com/ajax-presentation-22787/85/Ajax-Presentation-23-320.jpg)
![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 + " cols and " + rows + " rows"); }](https://image.slidesharecdn.com/ajax-presentation-22787/85/Ajax-Presentation-24-320.jpg)
Ajax Presentation
- 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 + " cols and " + rows + " rows"); }
- 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("FirstName", "System.String"); dt.addColumn("Age", "System.Int32"); dt.addRow({"FirstName":"Michael","Age":28}); dt.addRow({"FirstName":"Tanja","Age":25}); ds.addTable(dt);
- 26. AJAX.Net Dataset ( Creating a client-side DataSet using JS ) dt.addRow({"FirstName":"Michael","Age":28}); // or using an object var row = new Object(); row.FirstName = "Michael"; row.Age = 28; dt.addRow(row);
- 27. One Day AJAX is not the end, one day you will look at this technology and LAUGH !!!