Ajax Presentation

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

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

Overview Please wait … Request Response Client Server

Overview: Traditional Web App. Life Cycle Request

Process Overview: Traditional Web App. Life Cycle Loading

Response Overview: Traditional Web App. Life Cycle

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 .

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.

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

AJAX Web App. Life Cycle Request

Process AJAX Web App. Life Cycle Nothing here

Response AJAX Web App. Life Cycle

Real world example Falafel & Jumaa

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 .

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

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

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???)

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

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

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.

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

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

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"); }

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);

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);

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

Ajax Presentation

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Ajax Presentation (20)

Recently uploaded (20)

Ajax Presentation