AJAX

Ajax stands for Asynchronous JavaScript and XML. Ajax isn’t a technology; it mixes well-known programming techniques in an uncommon way to enable web developers to build Internet applications with much more appealing user interfaces. When using desktop applications, we expect the results of our work to be made available immediately and without us having to wait for the whole screen to be redrawn by the program. While using a spreadsheet such as Excel, for instance, we expect the changes we make in one cell to propagate immediately through the neighboring cells while we continue to type, scroll the page, or use the mouse.

Unfortunately, this sort of interaction has rarely been available to users of web-based applications. Much more common is the experience of entering data into form fields, clicking on a button or link, and then sitting back while the page slowly reloads to exhibit the results of the request. In addition, we often find that the majority of the reloaded page consists of elements that are identical to those of the previous page and that have therefore been reloaded unnecessarily such as background images, logos, and menus.

Ajax gives a solution to this problem. By working as an extra layer between the browser and the web server, Ajax handles server communications in the background, submitting server requests and processing the returned data. The results may then be integrated into the page being viewed, without that page needing to be refreshed or a new one loaded.

In Ajax applications, such server requests are not necessarily synchronized with user actions such as clicking on buttons or links. A well-written Ajax application may already have asked of the server, and received, the data required by the user perhaps before the user even knew he wanted it. This is the meaning of the asynchronous part of the Ajax acronym.

The parts of an Ajax application that happen "under the hood" of the browser, such as sending server queries and dealing with the returned data, are written in JavaScript, and XML is a means of coding and transferring formatted information used by Ajax to efficiently transfer data between server and client.

What makes AJAX Useful?

AJAX development is a big step towards web development instead of having to send everything to the server in a single, huge mass, then wait for the server to send back a new page for rendering, web developers can communicate with the server in smaller chunks, and selectively update specific areas of the page based on the server’s responses to those requests. This is where the word asynchronous in the AJAX originated.

It’s is easy to understand the idea of an asynchronous system by considering its opposite—a synchronous system. In a synchronous system, everything occurs in order. If a car race was a synchronous system, it would be a very dull affair. The car that started first on the grid would be the first across the finish line, followed by the car that started second, and so on. There would be no overtaking and if a car broke down, the traffic behind would be forced to stop and wait while the mechanics made their repairs. Traditional web applications use a synchronous system you must wait for the server to send you the first page of a system before you can request the second page.

Traditional Web Application Vs Ajax Web Application

 

So from above two figures we can easily make out the difference between Traditional web application and AJAX web application. AJAX is not a new programming language, but a technique for creating better, faster, and more interactive web applications.

With AJAX, your JavaScript can communicate directly with the server, using the JavaScript XMLHttpRequest object. With this object, your JavaScript can trade data with a web server, without reloading the page.

AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.The AJAX technique makes Internet applications smaller, faster and more user-friendly.

XMLHttpReqeust

To get or send information from/to a database or a file on the server with traditional JavaScript, you will have to make an HTML form, and a user will have to click the "Submit" button to send/get the information, wait for the server to respond, then a new page will load with the results. Because the server returns a new page each time the user submits input, traditional web applications can run slowly and tend to be less user-friendly.

With AJAX, your JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object.

With the XMLHttpRequest object, a web page can make a request to, and get a response from a web server - without reloading the page. The user will stay on the same page, and he or she will not notice that scripts request pages, or send data to a server in the background.

By using the XMLHttpRequest object, a web developer can update a page with data from the server after the page has loaded.

The XMLHttpRequest object is supported in all major browsers (Internet Explorer, Firefox, Chrome, Opera, and Safari

Creating XMLHTTPRequest Object

You cannot make use of the XMLHTTPRequest until you have created an instance of it.

Microsoft first introduced the XMLHTTPRequest object, implementing it in Internet Explorer 5 as an ActiveX object.

The following line creates an XMLHTTPRequest object called request

               var request = new XMLHTTPRequest();

Here we have declared a variable request and assigned to it the value returned 

from the statement new XMLHTTPRequest(), which is invoking the constructor 

method for the XMLHTTPRequest object.

To achieve the equivalent result in Microsoft Internet Explorer, you need to 

create an ActiveX object.

Here's an example

               var request = new ActiveXObject("Microsoft.XMLHTTP");

This assigns the name request to the new object.

Some versions of Internet Explorer have a different version of MSXML, 

the Microsoft XML parser, installed; in those cases you need to use the following

instruction

               var request = new ActiveXObject("Msxml2.XMLHTTP");

For cross Browser detection, this is the following code

function ajaxFunction()

{

               var xmlhttp;

               if (window.XMLHttpRequest)

                {

               // code for IE7+, Firefox, Chrome, Opera, Safari

               xmlhttp=new XMLHttpRequest();

                }

               else if (window.ActiveXObject)

                {

                // code for IE6, IE5

               xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

                }

               else

                 {

               alert("Your browser does not support XMLHTTP!");

                }

}

In above example create a variable named xmlhttp to hold the XMLHttpRequest 

object,Try to create the XMLHttpRequest object with 

xmlhttp=new XMLHttpRequest(). If that fails, try xmlhttp=

new ActiveXObject("Microsoft.XMLHTTP"). This is for IE6 and IE5. If that fails too, 

the user has a very outdated browser, and will get an alert stating that the

browser doesn't support XMLHTTP.

Note: The code above can be used every time you need to create an XMLHttpRequest object.

XMLHttpRequest Communicated with Server

Before sending data off to a server, we will look at some important properties and methods of the XMLHttpRequest object.

XMLHttpRequest Properties

The onreadystatechange property

After a request to a server, we need a function to receive the data returned from the server.

The onreadystatechange property stores the function that will process the response from a server. The function is stored in the property to be called automatically.

onreadystatechange property - you can create a function  (sometimes called an anonymous function because it doesn’t have a name). To create a function , just use the function statement and define the body of this new function in curly braces.

This new, anonymous function will be called when the XMLHttpRequest object undergoes some change, as when it downloads data. We need to watch two properties of this object here - the readyState property and the status property.

The following code sets the onreadystatechange property and stores an empty function inside it

            xmlhttp.onreadystatechange=function()

{

// We are going to write some code here

}

 

The readyState property

The readyState property holds the status of the server's response. Each time the readyState property changes, the onreadystatechange function will be executed.

Possible values for the readyState property

State	Description
0	The request is not initialized () The object has been created but the open() method hasn't been called. )
1	The request has been set up (The open() method has been called but the request hasn't been sent. )
2	The request has been sent
3	The request is in process (A partial response has been received)
4	The request is complete (All data has been received and the connection has been closed. )

Add an If statement to the onreadystatechange function to test if the response is complete (means that now we can get our data)

xmlhttp.onreadystatechange=function()

{

if(xmlhttp.readyState==4)

  {

  // Get data from the server's response

  }

}

When a server request is first made, the value of readyState is set to zero, meaning uninitialized. As the server request progresses, data begins to be loaded by the server into the XMLHTTPRequest object, and the value of the readyState property changes accordingly, moving to 1 and then 2. An object readyState value of 3, interactive, indicates that the object is sufficiently progressed so that certain interactivity with it is possible, though the process is not yet fully complete. When the server request has completed fully and the object is available for further processing, the value of readyState changes finally to 4. In most practical cases, you should look for the readyState property to achieve a value of 4, at which point you can be assured that the server has finished its task and the XMLHTTPRequest object is ready for use.

Status property:

The status property holds the status of the download itself. (This is the standard HTTP status code that the browser got for the URL you supplied.) Here are some of the possible values the status property can hold (note that a value of 200 means everything is just fine)

• 200 -    OK - The request succeeded.

·         204 -    No Content - The document contains no data.

·         401 -    Unauthorized - The request needs user authentication.

• 403 -    Forbidden - The server has refused to fulfill the request

·         404 -    Not Found - The requested resource does not exist on the server.

·         408 -    Request Timeout - The client failed to send a request in the time allowed by the server.

·         500 -    Internal Server Error - Due to a malfunctioning script, server configuration error or similar.

Example

xmlhttp.onreadystatechange=function()                     // anonymous function will create
{
if(xmlhttp.readyState==4 && xmlhttp.status == 200)
  {
  // Get data from the server's response
  }
}

The responseText property

The data sent back from a server can be retrieved with the responseText property. Now, we want to set the value of the "Time" input field equal to responseText.

xmlhttp.onreadystatechange=function()

{

if(xmlhttp.readyState==4)

  {

  document.myForm.time.value=xmlhttp.responseText;

  }           

XMLHttpRequest Methods

To send off a request to the server, we can use the open() and send() methods.

Open()

The open() method takes three arguments. The first argument defines which method to use when sending the request (GET or POST). The second argument specifies the URL of the server-side script. The third argument specifies that the request should be handled asynchronously.

The open() method prepares the XMLHTTPRequest object to communicate with the server. After you have created an XMLHttp object, you are ready to start making HTTP requests from JavaScript. The first step is to call the open() method, which initializes the object. The syntax is as under

Syntax

open(“method”, “URL”, [async, username, password])

We need to supply at least the two mandatory arguments to this method. First, specify which HTTP method you intend to use, usually GET or POST as a string value. Next, the destination URL of the request is included as the second argument. If making a GET request, this URL needs to be suitably encoded with any parameters and their values as part of the URL. For security reasons, the XMLHTTPRequest object is allowed to communicate only with URLs within its own domain. An attempt to connect to a remote domain results in a "permission denied" error message. Optionally you may include a third argument to the send request, a boolean value to declare whether the request is being sent in asynchronous mode. If async is set to false, the request is sent synchronously, and JavaScript waits for a response from the server before continuing code execution. That means if the response takes a long time, the user cannot interact with the browser until the response has completed. The default value is true. When set to true, the request is sent asynchronously, and JavaScript code execution continues without waiting for the response, we must use an event handler to watch for the response to the request.

send()

After creating XMLHTTPRequest using the open() method, you can send the request using the send() method. One argument is accepted by the send() function. The syntax is as under

Syntax

send(content)

If your request is a GET request, the request information will be encoded into the destination URL, and you can then simply invoke the send() method using the argument null

objectname.send(null);

If your request is POST request, the content of the request (suitably encoded) will be passed as the argument.

objectname.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

objectname.send(var1=value1&var2=value2);

In this case we use the setRequestHeader() method to indicate what type of content we are including. The send() method sends the request off to the server. If we assume that the HTML and ASP file are in the same directory, the code would be

xmlhttp.open("GET","time.php",true);

xmlhttp.send(null);

Now let’s see some example of AJAX

AJAX with HTML

ajaxdemo.html

<script type="text/javascript">

var http = false;

if(navigator.appName == "Microsoft Internet Explorer") {

                        http = new ActiveXObject("Microsoft.XMLHTTP");

} else {

  http = new XMLHttpRequest();

}

function replace()

{

  http.open("GET", "test.txt", true);

  http.onreadystatechange=function()

 {

    if(http.readyState == 4) {

      document.getElementById('changed').innerHTML = http.responseText;

    }

  }

  http.send(null);

}

</script>

<p><a href="javascript:replace()">Replace Text</a></p>

<div id="changed">

            Hello, world!

</div>

test.txt

This is the content of test.txt

Output

 

  

In above program AJAX is used HTML, when user click on Replace Text link it will call replace function, in replace() function open() method is used to open file test.txt and send method will send request to server, request to server will send by using send() method only, if we have used only open() method than it will not send request to open it will just prepare a data to send to server, now when server response to that request send it will call the anonyms function, the XMLHttpRequest object undergoes some change, and when it will downloads data readystate property value will set to 4, it will print the content of text file in place of Hello World without reloading the page.

AJAX  with PHP

Example 

ajaxhtml.html

<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.open("GET", "validate.php?name=" + user, true);

            http.onreadystatechange=function()

{

            if(http.readyState == 4) {

                        document.getElementById('data').innerHTML = http.responseText;

             }

  }

  http.send(null);

}

</script>

<h1>Please choose your username :</h1>

<form>

  <input type="text" onkeyup="validate(this.value)" />

  <div id=data></div>

</form>

validate.php

<?php

function validate($name)

{

  if($name == '') {

    return '';

  }

 if(strlen($name) < 3) {

             return "<span id=\"spantag\">Username too short</span>\n";

            }

            switch($name)

{

            case 'tom':

            case 'jerry':

            case 'john':

             case 'snohit':

            return "<span id=\"spantag\">Username already taken</span>\n";

             }

return "<span id=\"spantag\">Username ok! </span>\n";

}

echo validate(trim($_REQUEST['name']));

?>

Output

Figure 5.6 Example of AJAX and PHP

In above example user will enter the name in text box, when user will typed message will print too short, Username OK , or Username already taken. Depends on user enter the name, if name is less than 2 character it will print Username too short, if user name is already in switch case loop like tom, jerry and john it will print Username already taken.

in above program ajaxhtml.html file will send request validate.php?name=user to server using xmlHttpRequest object, server will call file validate.php and check the name, if number of character is 2 it will print Username too short, else it will check the name entered in switch if not found then print Username OK.