Posted on: February 13, 2010 at 12:00 AM
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
xmlhttpfunction
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:
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.
