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.

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.

<select name="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;

url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("POST",url,true);
xmlHttp.send(null);
}



This function creates xmlHttp object by calling a function GetXmlHttpObject()

You can refer the GetXmlHttpObject() below.


function GetXmlHttpObject()
{
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");
  }
 }
return xmlHttp;
}

The url to be sent as server request is created by specifying the server-side webpage (e.g getuser.php), the function argument "name", and a random number to avoid cache problem.

A function stateChanged is called on onreadystatechange event for getting the response from the webserver for the request of this created url.

You can refer the sample state Changed function below.

Find below the sample server side code (e.g getuser.php) which will be used for sending response according to the value selected in the drop-down list.

<?php $link=project1_db_connect1(); //for connecting database. function project1_db_connect1() { $link=@mysql_connect("localhost","root","") or exit (); mysql_select_db ("my_db1") or exit (); return $link; } ?> <table border="1" width="100%"> <tr> <td>First name</td> <td>last name</td> <td>age</td> </tr> <?php $q=$_GET["q"]; $sqluser="select * from persons where id=".$q; $result=mysql_query($sqluser); while($userrow=mysql_fetch_assoc($result)) { $firstname=$userrow['FirstName']; $lastname=$userrow['LastName']; $age=$userrow['Age']; ?> <tr> <td><?php echo $firstname;?></td> <td><?php echo $lastname;?></td> <td><?php echo $age;?></td> </tr> <?php } ?> </table>

The above code is receiving the selected drop-down value as "q" querystring parameter in the url. sql query will be used for fetching details such as firstname, lastname age for the corresponding "q" value.The xmlhttp object is receiving the output of this php page.

If you have better solution, just tell me !