AJAX And Its Uses In Php

AJAX Introduction :

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 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)

Web applications have many benefits over desktop applications:

• they can reach a larger audience

• they are easier to install and support

• they are 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).

There is nothing new to learn.

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.

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.

PHP and AJAX :

There is no such thing as an AJAX server.

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.

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

However, in this tutorial we will focus more on actual examples running on a PHP server, and less on how AJAX works.

AJAX XMLHttpRequest :

The XMLHttpRequest object makes AJAX possible.

The XMLHttpRequest object is the key to AJAX.

It has been available ever since Internet Explorer 5.5 was released in July 2000, but not fully discovered before people started to talk about AJAX and Web 2.0 in 2005.

Creating An XMLHttpRequest Object :

Different browsers use different methods to create an XMLHttpRequest object.

Internet Explorer uses an ActiveXObject.

Other browsers uses a built in JavaScript object called XMLHttpRequest.

Here is the simplest code you can use to overcome this problem:

var XMLHttp=null
if (window.XMLHttpRequest)
{
XMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}

Example above explained:

• First create a variable XMLHttp to use as your XMLHttpRequest object. Set the value to null.

• Then test if the object window.XMLHttpRequest is available. This object is available in newer versions of Firefox, Mozilla, Opera, and Safari.

• If it's available, use it to create a new object: XMLHttp=new XMLHttpRequest()

• If it's not available, test if an object window.ActiveXObject is available. This object is available in Internet Explorer version 5.5 and later.

• If it is available, use it to create a new object: XMLHttp=new ActiveXObject()

A Better Example :

Some programmers will prefer to use the newest and fastest version of the XMLHttpRequest object.

The example below tries to load Microsoft's latest version "Msxml2.XMLHTTP", available in Internet Explorer 6, before it falls back to "Microsoft.XMLHTTP", available in Internet Explorer 5.5 and later.

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

Example above explained :

• First create a variable XMLHttp to use as your XMLHttpRequest object. Set the value to null.

• Try to create the object the according to web standards (Mozilla, Opera and Safari): XMLHttp=new XMLHttpRequest()

• Try to create the object the Microsoft way, available in Internet Explorer 6 and later: XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")

• If this catches an error, try the older (Internet Explorer 5.5) way: XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")