PHP AJAX Programming

AJAX is a new programming style by which we can receive quicker response to the request sent for server side files or resources. Requests are sending through Javascript object to a server file. After execution, we can get updates without page refresh.

AJAX can be expanded as Asynchronous Javascript and XML using which we can get any type of data from server. It has similar coding styles and rules as like as Javascript, but with advanced feature.

How to access PHP file using AJAX programming

  1. First, we need to create instance for XMLHTTPRequest using XMLHttpRequest() construct. For older browsers like IE5, IE6, we should use ActiveXObject().
  2. And then, Open the server file with required arguments.
  3. Send request to the file using XMLHTTPRequest instance.
  4. Work with the response text generated by server file.

create instance for XMLHTTPRequest

XMLHTTPRequest instance can be created by some Javascript constructs like XMLHttpRequest or ActiveXObject.

For example, the following line of code is used to create such instance.

xmlHttpRequest=new XMLHttpRequest();

But, for some older versions of internet explorer, this object will be created as follows.

xmlHttpRequest=new ActiveXObject("MSXML2.XmlHttp");

Opening PHP file and sending request

Using XMLHttpRequest instance created in last step, we should open the file which is at server. The following code deals with it by passing url and requesting method as arguments.

xmlHttpRequest.open("GET","signin.php?userName="+userName+"&password="+password,true);
xmlHttpRequest.send();

Work with the response text generated by server file

We need to update the particular portion of webpage based on the response text generated by the server file. For that, we need to specify that particular part of the webpage with an id.

ajax_programming_and_php

Example: User authentication using PHP, AJAX and MySQL.

We have seen about user authentication mechanism already. In this example, we are going to do the same thing with AJAX programming to get comparatively quicker response server.

The HTML content with AJAX call is as shown below.

<html>
<head>
<title>User Login</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script>
function callLogin()
{
var userName = document.getElementById("userName").value;
var password = document.getElementById("password").value;
xmlHttpRequest=new XMLHttpRequest();
xmlHttpRequest.onreadystatechange=function() {
if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200) {
document.getElementById("messageBoxId").innerHTML=xmlHttpRequest.responseText;
}
}
xmlHttpRequest.open("GET","signin.php?userName="+userName+"&password="+password,true);
xmlHttpRequest.send();
}
</script>
</head>
<body>
<form name="frmUser" method="post" action="">
<div id="loginDivId">
<div class="message" id="messageBoxId"></div>
<table border="0" cellpadding="10" cellspacing="1" width="500" align="center">
<tr class="tableheader">
<td align="center" colspan="2">Enter Login Details</td>
</tr>
<tr class="tablerow">
<td align="right">Username</td>
<td><input type="text" name="userName" id="userName"></td>
</tr>
<tr class="tablerow">
<td align="right">Password</td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr class="tableheader">
<td align="center" colspan="2"><input type="button" name="submit" value="Login" onClick="callLogin();"></td>
</tr>
</table>
</div>
</form>
</body>
</html>

Here, the php script is completely separated and called by AJAX on clicking the Login button.

Now the PHP script is,

if(count($_GET)>0) {
$conn = mysql_connect("localhost","root","");
mysql_select_db("payload",$conn);
$result = mysql_query("SELECT * FROM users WHERE userName='" . $_GET["userName"] . "' and password = '". $_GET["password"]."'");
print "SELECT * FROM users WHERE userName='" . $_GET["userName"] . "' and password = '". $_GET["password"]."'";
$count  = mysql_num_rows($result);
if($count==0) {
print "Invalid Username or Password!";
} else {
print "You are successfully authenticated!";
}
mysql_close($conn);
}

Data printed at this PHP file will be taken as response text. So, on successful login, the success message will be inserted into the web page, instead of reloading entire page.

This PHP code tutorial was published on May 8, 2013.

↑ Back to Top