simple ajax example in php

AJAX stands for Asynchronous Javascript And XML. With ajax, we do need to submit whole form to php, rather, we can send information from a portion of form and receive the response. In this way, the communication cost and delay in submitting the form and receiving response can be significantly reduced.

The following program uses three files:

default.php :

This file is our main web page from which we send information to server side, using ajax. In our case, we are passing an ID to javascript function, and against that ID we want to receive the name of the user

ajax_javascript.php :

This file creates an ajax object, using which we communicate with the backend php file

ajax_file.php :

This file contains the server side logic. It receives the values of parameters sent by javascript file and “echo” the response. It is important to note that only one value can be echoed from php file at a time. This file DOES NOT return any value

Here is code of the files. For database, you can use the same code/database as used in previous examples.

default.php

<html>
<head>
<title></title>

<script type="text/javascript" src="ajax_javascript.js"></script>
</head>
<body>
<form id="frm" name="frm" method="post" action="">
<input id="btn" name="btn" value="click" onclick="ShowMessage(1);" type="button">
</form>

<br><br>

<label id="label1"></label>
<br><br>

<div id="div1">
</div>

</body>
</html>

ajax_javascript.js

function ShowMessage(id)
{

xmlHttp=GetXmlHttpObject();

if (xmlHttp==null)
{
  alert ("Your browser does not support AJAX!");
  return;
} 

xmlHttp.open("POST", "ajax_file.php", true);

///////// Function getting values back from php file /////////////////////////
xmlHttp.onreadystatechange=function() 
{ 
  if (xmlHttp.readyState==4)
  {
    var response = xmlHttp.responseText;	
    
    
    document.getElementById("div1").innerHTML=response;

  }
} 


// Make our POST parameters string…
  var params = "id=" + encodeURI(id);

  // Set our POST header correctly…
  xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlHttp.setRequestHeader("Content-length", params.length);
  xmlHttp.setRequestHeader("Connection", "close");

  // Send the parms data…
  xmlHttp.send(params);  
}




///////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////// Return the appropriate Ajax object  //////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}
//=======================================================================================

ajax_file.php

<?php
include("db/opendb.php");

if(isset($_POST['id']))
{
$id = $_POST['id'];	
$query = "select * from stdrecord where stdid=".$id;
$stmt = $conn -> prepare($query);
$stmt -> execute();

$str = "<table border='1'>";


while($row = $stmt->fetch())
{
$str = $str . "<tr><td>$row[0]</td><td>$row[1]</td></tr>";
}
$str = $str . "</table>";


echo $str;
$conn = NULL;
}
?>

 

Tags:,

Add a Comment

Your email address will not be published. Required fields are marked *