PHP AJAX Introduction
In this current tutorial we will study how to integrate a simple PHP file with AJAX, how to put some AJAX affect in a PHP file. In AJAX JavaScript can directly communicate with the web server with the help of XMLHttpRequest object and without reloading the page, this makes AJAX more attractive and effective.
In this current tutorial we will study how to integrate a simple PHP file with AJAX, how to put some AJAX affect in a PHP file. In AJAX JavaScript can directly communicate with the web server with the help of XMLHttpRequest object and without reloading the page, this makes AJAX more attractive and effective.PHP-AJAX-Introduction
In this current tutorial we will study how to integrate a simple PHP file with AJAX, how to put some AJAX affect in a PHP file. But first of all let's discuss what is AJAX and how it works?
AJAX stands for Asynchronous JavaScript And XML.
AJAX is not a new programming language but it is a combination of few web standards like JavaScript, XML, CSS, HTML.
In AJAX JavaScript can directly communicate with the web server with the help of XMLHttpRequest object and without reloading the page, this makes AJAX more attractive and effective.
AJAX uses Asynchronous data transfer between the browser and the server, allowing web pages to reload in a small fragment of web page instead of reloading the whole page.
In the following example we will try to display dynamic content which is fetched from the database dynamically and displays on the screen.
First of all we need to create a table in mysql, just copy and paste the following code in mysql console screen or on any GUI,
create database <database name>;
use <database name>;
create table <table name>
(city_id int primary key auto_increment, city_name varchar(50));
select * from <table name>;
insert into <table name>
values('','<city name>');
Note: Please replace the code within <> bracket with appropriate name.
After creation of table we will need three different files html file, JavaScript file, and PHP file.
php-ajax.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> PHP Ajax Example </TITLE>
<script type="text/javascript" src="php-ajax.js">
</script>
</HEAD>
<BODY>
<form name="firstAjax">
City: <input type="text" id="city" onkeyup=" dispCity(this.value)"/>
</form>
<br/>
Suggestions:<span id="cityname"></span>
</BODY>
</HTML>
php-ajax.php
<?php
$con=mysql_connect('localhost','root','');
if(!$con){
die("Can not connect". mysql_error());
}
mysql_select_db('ajax',$con);
$sql="select * from city";
$result=mysql_query($sql,$con);
$c=$_GET['c'];
$a=array();
$city="";
if(strlen($c)>0){
$city="";
$i=0;
while($row=mysql_fetch_array($result)){
array_push($a,$row['city_name']);
}
}
for($i=0;$i<count($a);$i++)
{
if(strtolower($c)==strtolower(substr($a[$i],0,strlen($c)))){
if($city==""){
$city=$a[$i];
}
else
{
$city=$city." , ".$a[$i];
}
}
if($city=="")
{
$res="No suggestion";
}
else
{
$res=$city;
}
}
echo $res;
?>
php-ajax.js
var xmlhttp
function dispCity(str)
{
if (str.length==0)
{
document.getElementById("cityname").innerHTML="";
return;
}
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support XMLHTTP!");
return;
}
var url="php-ajax.php";
url=url+"?c="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("cityname").innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
Output:
