Create simple application with ajax and php

Nowadays many readers are quite familiar with the latest web technologies not because of their easy syntax, but also for their simple user interface which is continuously adopted by tech giants like Google,Yahoo and many more. However in this article i highlight few important concepts to develop a simple web application with AJAX and PHP.

Note:  AJAX(Asynchronous JavaScript and XML) is a combination of both JavaScript and XML. We use AJAX to fetch data asynchronously(doesn’t require page refresh) from server.

working of ajax

Sample Application with Ajax and PHP


We are going to create an application with the help of Ajax and PHP in which server calls location data while user is writing location in the text box without page refresh.


To create an application with AJAX and PHP we need to install PHP web server(like WAMP for windows) and editor like notepad++ or Adobe Dreamweaver.

Note: Before developing this application, i assumed that reader would be familiar with the syntax of HTML, JavaScript, AJAX and PHP.


After setting the PHP web server and code editor we need to create a folder under root directory of web server(localhost). Under this folder we have to create three files such as:

  1. index.html        (one html file)
  2. phpcheck.php  (one php file)
  3. 01.js                 (one javascript file)

1) index.html:  In this file we need to write html code to build the page. We can also use CSS to style the page.

2) phpcheck.php:  This PHP file must be executed by PHP server upon calling by JavaScript code of 01.js file.

3) 01.js: Under this JavaScript file we write our Ajax code, which further connects with server asynchronously to fetch location data without page refresh.


Let’s understand the code one by one.

HTML Code:

This file contains HTML code for the application.

<title>Ajax & PHP Application - 87android</title>
<script type="text/javascript" src="01.js"> </script>  <!-- linking JavaScript file -->
<body onload="startconnect()">  <!-- loading function written in JavaScript file -->
<strong>What is your desired location:</strong>
<input type="text" id="txt1" />
<div id="locationdiv"/>

PHP Code:

This file includes php script and must reside in the server.

header('Content-Type: text/xml');  // generate XML output
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';  // generate XML header
echo '<response>';                       // create the <response> element
$location = $_GET['txt1'];            // retrieve the location data

// generate output depending on the location data received from user
$locationNames = array("DELHI", "CHENNAI", "MUMBAI", "BANGALORE", "BIHAR");
if (in_array(strtoupper($location), $locationNames)){
echo "Weclome user your location is:  " .htmlentities($location)." !";
}else if (trim($location) == ""){
echo 'Please enter your desired location!';
echo htmlentities($location) . ', Unidentified location, please type desired location';
echo '</response>';   // close the <response> element

JavaScript Code:

We have to create a function named as “msg()” in this JavaScript file so that Ajax asynchronously fetch location data from server without page refresh.

// make asynchronous HTTP request using the XMLHttpRequest object
function msg()  
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)  // proceed only if the xmlHttp object isn't busy
name = encodeURIComponent(document.getElementById("txt1").value); // fetch the location write by user in the text box"GET", "phpcheck.php?txt1=" + name, true); // execute the phpcheck.php page from the server
xmlHttp.onreadystatechange = handleServerResponse;    // define the method to handle server responses
xmlHttp.send(null);    // make the server request
setTimeout('msg()', 2000);   // if the connection is busy, try again after two second

Note:  Use Ajax according the requirement of your web application and understand the role of “XMLHttpRequest object” in Ajax applications.

Download Code

Uploaded by:  Author