Friday, June 5, 2009

Introduction to Ajax and sample code for learning Ajax

Ajax is not an Technology in itself. It is a term used for representing the technique used for updating the webpage content asynchronously without affecting existing content of the webpage.

i-e Some part of the existing webpage on a webbrowser can be refreshed with the content from web server without changing other parts of the webpage i-e without refreshing the whole webpage.

Ajax was made popular by Google by using it in the Google Suggest.

So, basically below steps are involved in using ajax for webdevelopment.

- Creating client side code which will call a javascript function on some events such as onChange.- Creating a XMLHttpRequest which will be used for sending request to web server from javascript itself and used for receiving response from the webserver.

- A place such as div in the client side code for placing the server response got from the ajax call.

We will see the above steps in detail using below sample code.

Consider below HTML code which will be placed within a Form.

<selectname="name"id="name"onChange="showUser(this.value);">

The above code will call a javascript function showUser() when changing the drop-down list value in the Select tag.

The selected value (i-e name in this example) will be passed as argument to the showUser.

The showUser javascript function will look like below mentioned code.

function showUser(str){ xmlHttp=GetXmlHttpObject();

if (xmlHttp==null) { alert ("Browser does not support HTTP Request"); return; }var url="getuser.php";url=url+"?q="+str;