AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
How does it work?
Ans:
There are two section Ajax coding:
Http Request:
To make browser compatibility, we write code for different browsers:
For IE6 and IE5:
Create an instance for ActiveXObject. Check below code
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
For IE7+, Firefox, Chrome, Opera, Safari:
Create an instance for XMLHttpRequest. Check below code
xmlhttp=new XMLHttpRequest();
Next thing is to check your browser running this script:
If window.XMLHttpRequest is true. It means that your code is compatible with IE7+ or Firefox or Chrome, Opera or Safari.
If we combine above codes, You get a new on to send Http Request
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
Http Response:
Check few terms before writing codes for http response
if
xmlhttp.readyState =
4, It means your http request sent completed
if
xmlhttp.status =
200, It means you get http response successfully
Following is code for Http response:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("ID OF HTML TAG").innerHTML=xmlhttp.responseText;
}
}
Now open http response under "getmydata" using method GET
xmlhttp.open("GET","URL WITH QUERYSTRINGS",true);xmlhttp.send();
Now i am combining above codes to make a complete code to use.
<script>
function sendData(str)
{
if (str=="")
{
document.getElementById("getmydata").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("getmydata").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test.php?p="+str,true);
xmlhttp.send();
}
</script>
1. Put this javascript before </head>
2. Suppose i have a form with dropdown. See Below
<select name="mydate" onChange="sendData(this.value)">
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
</select>
If you see this dropdown form carefully, you can see that an even is running onchange. When you change dropdown selection. Selected value send to SendData function.
When you are using ajax coding, few browsers are not supporting that syntax. So, We should write browser compatible code.
In ajax operation, You send http request to server on events like onClick, onChange, onKeyup etc and get back a http response.
SendData function calling an ajax. Under SendData function, Your selected value transfer using str. Here str storing your selected value.
Suppose you have selected "2002" from dropdown form. Then SendData transfer value "2002" to str.
Using following syntax to transfer value to your server,
xmlhttp.open("GET","test.php?p=2002",true);
Next thing, Where do you want to show result from test.php?p=2002
Write a html tag with id to see your result on webpage.
For example:
I have created a tag,
<div id="getmydata"></div>
Now your test.php page:
Create a page test.php.
Write following code and put following code
<?php
echo $_GET['p'];
?>
You will see output of $_GET['p'] under div with id getmydata.
Note:
1. You can take any unique id, it's not necessary to write "getmydata" always.
2. You can use any html tag, depends on your requirement. It's not necessary to write div only.
3. Similarly you can replace test.php and its querystrings.
In next post, I will show you a different code for ajax.
Enjoy coding.
