Ajax, What?

Ajax

'Asynchronous JavaScript And XML'.

What?

Use JavaScript to create a ThinClient 'XMLHttpRequest', and use it to request data from the server, and then use DOM 'Document Object Model' from JavaScript to apply the received data into the already loaded page, using Asynchronous pattern.

!!!??? 'Sorry …… What did you say!' Ok let's make it easy.

Earlier we deal with web site as following 'figure 1'

1. Request a web site 'Write web site URL' or 'Use Link from another site'.

2. The Web site server will process your request and send an Html page back.

3. Request an update for any port of the already load page the browser will post the whole page to the server.

4. Then the server will process your request and send the whole page back to your browser again.

Nowadays when using AJAX it will be as following 'figure 2'

1. Request a web site 'Write web site URL' or 'Use Link from another site'.

2. The Web site server will process your request and send an Html page back.

3. Request an update for any port of the already load page will enforce the ThinClient to handled the update request.

4. ThinClient will send only the data that server needs to make the update.

5. The server will process your request and send just the new data to the ThinClient.

6. The ThinClient will update only the port needs to update.

Ajax, How?

Ajax

'Asynchronous JavaScript And XML'.

How?

The main component in Ajax implementation is the 'ThinClient', which will take control of communicate with web site server instead of the browser.

ThinClient consist of an 'XMLHttpRequest' object and JavaScript code to handle the sending and receiving of data.

ThinClient creation steps:

1. Create instance of 'XMLHttpRequest':

var xmlHttp=null;

try // Firefox, Opera 8.0+, Safari

{ xmlHttp = new XMLHttpRequest(); }

catch (e) // Internet Explorer

{

Try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); }

catch (e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }

}

2. Create response handler function :

function stateChanged()

{ // Apply the server response to the HTML element.

if (xmlHttp.readyState == 4) { element.innerText = xmlHttp.responseText; }

} // 4 = The request is complete; xmlHttp.responseText hold the received data.

3. Attach the response handler function to 'onreadystatechange' ThinClient Event :

// Attach a method to 'onreadystatechange' event, which will fire when the thinClient state Changed

xmlHttp.onreadystatechange=stateChanged;

4. Create Request function, that will build the request and it to the server

// The open method that create a request to the web server take 3 args,

// and 2 optional args UserName/Password

// 1- the HTTP verb ('GET' or 'POST'), 2- the server-side page address,

// 3- Handled the request asynchronously or not

xmlHttp.open("GET","URL",true);

// Send the request to the server

xmlHttp.send(null);

Ajax demo:

a Web site consist of (ThinClient 'ThinClient.js', web page 'Index.htm', file contain HTML img tag 'data.txt', and Image 'Friends.jpg')

Host this demo at any web host, there are no special needs.

Request 'index.htm' and then click 'run' it will send a request to host to load 'data.txt' which contain image HTML tag '<img>' which refer to 'Friends.jpg' picture.

Note: browser will cache the 'data.txt' and ' Friends.jpg' file; that's mean changing the picture and click again 'run' will show the same picture, you will need to change the name of 'data.txt' file at host and in 'ThinClient.js' file.