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

Who (who uses AJAX)?

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

1 comments

Notes on slide 1

8 Favorites