About AJAX

AJAX is used to develop rich Web applications that dynamically update content using asynchronous JavaScript and XML, embedded into a HTML, PHP or other dynamic page, without having to refresh entire Web pages with each user click. It is a cross-platform technique that can be applied on most operating systems, computer architectures, and Web browsers. It is based on open standards such as JavaScript and XML with open source implementations of other technologies.

The JavaScript code is used to send requests to the server. Some processing is then required to handle the request, find the and/or store the data. The framework used always includes a JavaScript part, and sometimes a server side part in PHP, ASP, CFM or other scripting language.

Elements of Ajax include:

• XHTML and CSS for the presentation
• JavaScript for local processing
• DOM to access data in the page or XML/XSLT elements read on the server
• asynchronous data retrieval using the XMLHttpRequest class

Many Ajax frameworks and libraries rely solely upon JavaScript and contain no server components and therefore server technology dependencies. They use XML, JSON, or another textual data format. A JavaScript library is loaded with a simple tag:

This tag loads the "ascript" library into the page and it becomes usable to the browser. The .js file will hold the several components that are needed. Typically:

1. create a XMLHttpRequest or ActiveXObject object (see below browser compatibility).
2. send the request using the open method.
3. monitor the state of the request.
4. get the response.
5. use the response received in your Web page or application.

The XMLHttpRequest class

Attributes

readyState	the code successively changes value from 0 to 4 for ready state. 0 = request is not initialized 1 = request has been set up 2 = request has been sent 3 = request is being processed 4 = request is completed
status	the status of the HTTP request. 200 = no error 400  = bad request 401 = unauthorized 403 = forbidden 404  = not found 500  = internal server error and so forth.
responseText	holds the loaded data as a string of characters.
responseXml	holds an XML loaded file, DOM method allows to extract data.
onreadystatechange	property that takes a function as the value that is invoked when the readystatechange event is sent. For example: myrequest.onreadystatechange = function() { if (myrequest.readyState == 4 && myrequest.status == 200) { var myresponse = myrequest.responseText; } }

Methods

open (mode, url, boolean)	mode= the request type, either GET or POST. url= the location of the file, with/without a path. boolean= true (asynchronous) / false (synchronous). A username and a password may be added to the arguments.
send ("string")	for POST commands, always null when a GET command is used.
Example: myrequest.open("GET","mydata.php",true); myrequest.send(null);

Browser compatibility

Internet Explorer uses an ActiveXObject, while other browsers use the built-in JavaScript object called XMLHttpRequest. This means you will always have to check which browser is being used. This is usually done using the try and catch functions.

try {
// your code
}
catch(e) {
// handle errors
}

Standard browser checking using try and catch:

try {
xmlHttp=new XMLHttpRequest();   // Firefox, Opera, Safari
}
catch (e) {
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");      // Internet Explorer 6+
}
catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");      // Internet Explorer 5+
}
catch (e) {
alert('Your browser is old');
}
}
}

Another method:

var myrequest;
if (window.XMLHttpRequest){  // Firefox, Safari, Opera
myrequest = new XMLHttpRequest();
}
else if (window.ActiveXObject){  // IE 5
myrequest = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.ActiveXObject){  // IE 6+
myrequest = new ActiveXObject("Msxml2.XMLHTTP");
}
else {  // Error for old browser
alert ('Your browser is too old!');
}

AJAX FRAMEWORKS & LIBRARIES

Extensive Ajax libraries and frameworks that greatly simplify the writing of Ajax applications can be found here: Ajax libraries.

PHP

Server side, the programmer may use PHP to process requests from the browser. PHP deals with the database, the data, page generation or parts of a page and publish or update the page with any return data to the XMLHttpRequest object. PHP 5 specifically, thanks to its SimpleXML class, is able to create XML files that can be returned to the object. All these tasks require many functions, and the good news is that many libraries and frameworks already exist for the would-be Ajax programmer.

Sajax is an open source tool to make Ajax programming easier, using PHP, Perl or Python functions via JavaScript without needing a browser refresh. Visit Sajax .

Xajax is an open source PHP class library that allows you to easily create Web based Ajax applications using HTML, CSS, JavaScript, and PHP. Applications developed with xajax can asynchronously call server-side PHP functions and update content without reloading the page. Visit xajax .

Cake PHP is a rapid development framework for PHP that uses commonly known design patterns like ActiveRecord, Association Data Mapping, Front Controller and MVC. It enables PHP users at all levels to rapidly develop robust web applications. Visit Cake PHP.

Saja is a lightweight, open-source AJAX scripting engine for PHP 4/5, with optional secured data transfer. It is designed for the fast creation of simple, secure, and maintainable Ajax applications, without having to write any JavaScript. Visit Saja.

Ajason is a PHP 5 library and JavaScript client for Ajax applications. Fetch data asynchronously and develop interactive GUI-like Web applications. Call PHP functions and object methods from JavaScript and exchange complex data types between client and server. Visit ajason. 

.NET frameworks

• Microsoft Ajax Library (formerly ATLAS) is made of a client side part, the Microsoft AJAX Library, and a server side part, theASP.NET 2.0 Ajax Extensions. Includes a component library with graphical widgets, the ASP.NET Ajax Control Toolkit.
   
• Ajax.NET Professional serializes (converts and stores) .NET data in the JSON format.

 ColdFusion frameworks

• AjaxCFC is aAn object oriented framework that provides developers seamless integration between JavaScript and ColdFusion, with built-in security and debugging functions. Visit AjaxCFC.
   
• CFAjax implements Ajax in such a way that ColdFusion method calls on the server get executed using JavaScript. Visit CFAjax.
   
• JSMX, its API runs entirely on the client and has no server side components. Extended to support also ColdFusion, XML, JSON, and WDDX or JavaScript on the server side from JavaScript requests on the client side. Visit JSMX.

RESOURCES

• AJAX, Getting Started
• Ajax Tutorial
• JSON - a data format that is part of the JavaScript standard.
• Yahoo's framework
• Ajax, XUL and Flash
• The JavaScript language - directory of resources and tutorials.
• A survey about frameworks
• Remote scripting with Ajax

Many Ajax applications and scripts can be downloaded from SimplytheBest Scripts.