AJAX

Asynchronous JavaScript And XML

AJAX is an acronym for Asynchronous JavaScript And XML.

AJAX is not a new programming language, but simply a new technique for creating better, faster, and more interactive web applications.

AJAX uses JavaScript to send and receive data between a web browser and a web server.
The AJAX technique makes web pages more responsive by exchanging data with the web server behind the scenes, instead of reloading an entire web page each time a user makes a change.

AJAX Is A Browser Technology

AJAX is a technology that runs in your browser. It 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 technology makes Internet applications smaller, faster and more user friendly.

AJAX is a web browser technology independent of web server software.

AJAX Is Based On Open Standards

AJAX is based on the following open standards:

JavaScript
XML
HTML
CSS

The open standards used in AJAX are well defined, and supported by all major browsers. AJAX applications are browser and platform independent. (Cross-Platform, Cross-Browser technology)

AJAX Is About Better Internet Applications

Web applications have many benefits over desktop applications, they can reach a larger audience, they are easier to install and support, and easier to develop.

However, Internet applications are not always as "rich" and user-friendly as traditional desktop applications.

With AJAX, Internet applications can be made richer (smaller, faster, and easier to use).

AJAX is based on open standards. These standards have been used by most developers for several years.

Most existing web applications can be rewritten to use AJAX technology instead of traditional HTML forms.

AJAX Uses XML And HTTP Requests

A traditional web application will submit input (using an HTML form) to a web server. After the web server has processed the data, it will return a completely new web page to the user. Because the server returns a new web page each time the user submits input, traditional web applications often run slowly and tend to be less user friendly.

With AJAX, web applications can send and retrieve data without reloading the whole web page. This is done by sending HTTP requests to the server (behind the scenes), and by modifying only parts of the web page using JavaScript when the server returns data.

XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.
You will learn more about how this is done in the next chapters of this tutorial.

AJAX can be used to create more interactive applications.

AJAX Example

In the AJAX example below we will demonstrate how a web page can communicate with a web server online as a user enters data into a web form.

Type a Name in the Box Below

First Name:

Example Explained - The HTML Form

The form above has the following HTML code:

First Name:

Suggestions:

As you can see it is just a simple HTML form with an input field called "txt1". An event attribute for the input field defines a function to be triggered by the onkeyup event.

The paragraph below the form contains a span called "txtHint". The span is used as a placeholder for data retrieved from the web server.

When the user inputs data, a function called "showHint()" is executed. The execution of the function is triggered by the "onkeyup" event. In other words: Each time the user moves his finger away from a keyboard key inside the input field, the function showHint is called.

Example Explained - The showHint() Function

The showHint() function is a very simple JavaScript function placed in the head section of the HTML page.

The function contains the following code:

function showHint(str){if (str.length==0){ document.getElementById("txtHint").innerHTML=""return}xmlHttp=GetXmlHttpObject()if (xmlHttp==null){alert ("Browser does not support HTTP Request")return} var url="gethint.asp"url=url+"?q="+strurl=url+"&sid="+Math.random()xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true)xmlHttp.send(null)}

The function executes every time a character is entered in the input field. If there is some input in the text field (str.length > 0) the function executes the following:

Defines the url (filename) to send to the server

Adds a parameter (q) to the url with the content of the input field
Adds a random number to prevent the server from using a cached file
Creates an XMLHTTP object, and tells the object to execute a function called stateChanged when a change is triggered

Opens the XMLHTTP object with the given url.
Sends an HTTP request to the server
If the input field is empty, the function simply clears the content of the txtHint placeholder.

Example Explained - The stateChanged() Function

The stateChanged() function contains the following code:

function stateChanged() { if (xmlHttp.readyState==4 xmlHttp.readyState=="complete"){ document.getElementById("txtHint").innerHTML=xmlHttp.responseText } }
The stateChanged() function executes every time the state of the XMLHTTP object changes.

When the state changes to 4 (or to "complete"), the content of the txtHint placeholder is filled with the response text.
AJAX applications can only run in web browsers with XML support.
AJAX Browser Support
AJAX applications can only run in web browsers with complete XML support.
Only two web browsers available today - Internet Explorer (IE) and Mozilla Firefox.- have complete enough support for XML to run AJAX applications.
Since other browsers like Safari and Opera have limited, incomplete or incorrect XML support, this tutorial will focus on IE and Firefox examples.

The example on the previous page called a function called GetXmlHttpObject.

The purpose of the function is to solve the problem of creating different XMLHTTP objects for different browsers.

The function is listed below:

function GetXmlHttpObject(handler){ var objXMLHttp=nullif (window.XMLHttpRequest){objXMLHttp=new XMLHttpRequest()}else if (window.ActiveXObject){objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")}return objXMLHttp}