Ajax with PHP
Ajax can be used with PHP, ASP, ASP.net, but in this tutorial we will use ajax with PHP. We will create some php applications using Ajax.
fist of All we create HTML form that will communicate with Ajax and PHP. the code is here
Name : <input type="text" name="name" />
Phone : <input type="text" name="phone" />
Gender <select name="gender">
<option>Male</option>
<option>Female</option>
</select>
<input type="button" name="Button" value="Check it " onclick="ajaxFunction(document.frm1.name.value,document.frm1.phone.value, document.frm1.gender.value)" />
</form>
<div id="my_div"></div>
Now we will create Ajax Script
<script type="text/javascript">
function ajaxFunction(name, phone, gender)
{
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer")
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{// code for IE6, IE5
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("my_div").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","response.php?name="+name+"&phone="+phone+"&gender="+gender,true);
xmlhttp.send();
}
</script>
We have created Ajax function ajaxFunction(name, phone, gender) that have 3 arguments(name, phone, gender)
In above example xmlthhp.open has 3 arguments
- Get Method
- filename response.php with querystring(?name="+name+"&phone="+phone+"&gender="+gender) that will use for accessing values.
- true for asynchronous
Now we will create response.php
$name= $_GET['name'];<br>
$phone= $_GET['phone'];<br>
$gender= $_GET['gender'];<br>
echo $name."<br />";<br>
echo $phone."<br />";<br>
echo $gender."<br />";<br>
?>
Ajax Example
Click HereComplete Source Code
<head>
<script type="text/javascript">
function ajaxFunction(name, phone, gender)
{
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer")
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("my_div").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ge.php?name="+name+"&phone="+phone+"&gender="+gender,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="" method="get" name="frm1">
<table width="800" border="0">
<tr>
<td width="131"> </td>
<td width="659"> </td>
</tr>
<tr>
<td>Name </td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td>Phone</td>
<td><input type="text" name="phone" /></td>
</tr>
<tr>
<td>Gender</td>
<td><select name="gender">
<option>Male</option>
<option>Female</option>
</select></td>
</tr>
<tr>
<td> </td>
<td><input type="button" name="Button" value="Button" onclick="ajaxFunction(document.frm1.name.value,document.frm1.phone.value, document.frm1.gender.value)" /></td>
</tr>
</table>
</form>
<div id="my_div"></div>
</body>
</html>