Home Tutorial Php Phpbasics Tutorial PHP AJAX Introduction

 
 

Share on Google+Share on Google+
PHP AJAX Introduction
Posted on: February 13, 2010 at 12:00 AM
Advertisement
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:

Output of Ajax

 

Advertisement

Related Tags for PHP AJAX Introduction:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: February 13, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com