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.