We have now know much more about ajax, and for the shake of understanding let us take a simple example which can exactly clears the concept what is the process and how ajax works.
Let us take an example:
Let us explain the working of the example described below. It includes an html page, which has the text box for search, also containing JavaScript and xml. And a php page having a php script for communicate to the server.
Functionality work as when you enter the text in the specified text field in the HTML page, it gives the response of your text, typed by you. Without doing a page refresh. And suddenly you got your response without doing wait.
HTML page:
We have taken a very basic example, the html page shows a text field in which, when you type the character less than 3 it shows a massage that string “Name typed is too short”, and if you type the name more than three characters and it would be not the name which we hard coded here (our main purpose is just to explaining the example, that why we here not taken the database and queries at all) as: kamal, dhirendra, aman, saurabh, it shows a massage “name already exists”, and if you type the name other than these four names it shows ka massage “This name is available for you”
<script type="text/javascript">
var http = false;

if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
function validate(user) {
http.abort();"GET", "validate.php?name=" + user, true);
http.onreadystatechange=function() {
if(http.readyState == 4) {
document.getElementById('valid_name').innerHTML = http.responseText;

<h1>Check your name availability:</h1>

<input type="text" onkeyup="validate(this.value)" />
<div id="valid_name"></div>
new XMLHttpRequest()The above constructor is for any other browser.
new ActiveXObject(Microsoft.XMLHTTP) –The above constructor is used for Internet Explorer.
http.readyState == 4 —The 4 state means that the response is being sent by the server and it is ready.
http.onreadystatechange— An anonymous function is assigned to the event indicator. Actually it specifies the callback function to be triggered when the ready state changes. “POST”, “data.xml”, true);
URL of the script to execute. The Last Argument is for checking for whether the request is asynchronous or synchronous, true is used for asynchronous and false for synchronous.
Description of the page validate_name.php Line by Line:
Line 1: <script type=”text/javascript”>Line 1 defines the <script> tag is used for embedded JavaScript code in an HTML document, the type defines the type you used and the language used for that.
Line2: var http = false; Create a new variable http and assign it a false value. You’ll use false as a condition that means the XMLHttpRequest object hasn’t been created yet.
Line 3 to 7 having a loop trying to create the XMLHttpRequest Object for the different browsers. We already define the xmlhttprequest object and also define the ActiveXObject.
Line 8: function validate(user) This is a JavaScript function named validate and the argument passed is user.
Line 9: http.abort(); Aborts the xmlhttp request. When the response is no longer required, we want to abort the request in order to make another more relevant one.
Line 10- 15:
In the code(function on line 10) is used for the sending a request to the server. To send a request to the server we use this method. It takes three parameters which we describe above, please refer to the above section where we describes it in details.
If we talk about sending data to the server, onreadystatechange is the prior requirement to first write a function that will be able to receive the information, the basic functionality of the onreadystatechangefunction is to catch the data that is return by the server.
readyState == 4:
The readyState property holds the status of the server’s response. Each time the readyState changes, the onreadystatechange function will be executed
State Description are given below:
0 Request uninitialized
1 Request Loading
2 Request Loaded
3 Request in process
4 Request is complete
Line 16: send(null); To send the request off to the server we use this method.
Two methods of XMLHttpRequest are used:
open: command GET or POST, URL of the document, true for asynchronous.
send: with POST only, the data to send to the server.
The request below read a document on the server.‘GET’, url’, true);
Line 18: Closes the script tag.
Line 19: <h1>Check your name availability:</h1> Display this content at User end
Line 20: Opens a form tag.
Line 21: <input type=”text” onkeyup=”validate(this.value)” /> Create a text field and call a function to an event(onkeyup).
Line 22: <div id=”valid_name”></div> Taking a div with taking an id .
Line 23:. </form> Close the form.
Page name: validate.php
function validate($name) {
  if($name == '') {
    return '';

  if(strlen($name) < 3) {
    return "<span id=\"warn\">Name typed is too short</span>\n";

  switch($name) {
    case 'kamal':
    case 'dhirendra':
    case 'aman':
    case 'saurabh':
      return "<span id=\"warn\">Name already Exist</span>\n";

  return "<span id=\"notice\">This name is available for you!</span>\n";

echo validate(trim($_REQUEST['name']));
This is the php script page which is communicate to server. This page simply calls the validate function and checks that whether it is empty or not.
The second if statement checks whether the string have less than three character, if it so than a message will be displayed “ Name typed too short”
We here take few names as hard coded, you may be fire a query for the names exist in the database.
And if the name typed in the text box will matched with the name described here or the query you fire, a new message will come “Name already exist.”
Rather than if you type a names other than the matching name a message comes “This name is available for you.”
Scroll to Top