Introduction to Ajax

Brief history

Ajax is only a name given to a set of tools that were previously existing.

The main part is XMLHttpRequest, a class usable in JavaScript , that was implemented into Internet Explorer since the 4.0 version.

The same concept was named XMLHTTP some times, before the Ajax name becomes commonly used.

In 2005, the use of XMLHttpRequest by Google, in Gmail and Google Maps contributed to the success of this format. However, this is the name of Ajax itself acquired technology is so popular.

Why to use Ajax?

Mainly to build a fast, dynamic website, but also to save resources.

To improve sharing of resources, not only it is better to use the power of all client server and network unique. Ajax on the client JavaScript () operation can be performed with data retrieved from the server.

The processing of web page formerly was only server-side, using web services or PHP scripts, before the whole page was sent within the network.

But Ajax can selectively modify one part of a page displayed by the browser, and does not inform the need to load the entire document with all the icons, menus, etc. ..

For example, fields of forms, choices of user, may be processed and the result displayed immediately into the same page.

What is Ajax in depth?

Ajax is a set of technologies, supported by a web browser, including these elements:

HTML and CSS for presenting.

JavaScript (ECMAScript) for local processing, and DOM (Document Object Model) to access data within the page or read access to elements of the XML file on the server (with getElementByTagName method, for example) ...

The XMLHttpRequest class read or send data on the server asynchronously.

optionally...

The DomParser class may be used

PHP or another scripting language may be used on the server.

XML and XSLT to process the data if returned in XML form.

SOAP may be used to dialog with the server.

The "Asynchronous" word, means that the response of the server while be processed when available, without to wait and to freeze the display of the page.

How does it works?

Ajax uses a programming model with display and events. These events are user actions, they call functions associated to elements of the web page.

Interactivity is achieved with forms and buttons. DOM allows you to connect the elements on the page with activities and also to extract data from XML files provided by the server.

To get data on the server, XMLHttpRequest provides two methods:

- open: create a connection.

- send: send a request to the server.

Data furnished by the server will be found in the attributes of the XMLHttpRequest object:

- responseXmlfor an XML file or

- responseTextfor a plain text.

Take note that a new XMLHttpRequest object has to be created for each new file to load.

We must wait for data to be available in this process, and to this end, the state of the data availability given the status of readyState XMLHttpRequest.

States of readyState follow (only the last one is really useful):

0: not initialized.

1: connection established.

2: request received.

3: answer in process.

4: finished.

Ajax and DHTML

DHTML has same purpose and is also, as Ajax, a set of standards:

- HTML,

- CSS,

- JavaScript.

DHTML allows to change the display of the page from user commands or from text typed by the user.

Ajax allows also to send requests asynchronously and load data from the server.

The XMLHttpRequest class

Allows to interact with the servers, thanks to its methods and attributes.

Attributes

readyState the code successively changes value from 0 to 4 that means for "ready".

status 200 is OK

404 if the page is not found.

responseText holds loaded data as a string of characters.

responseXml holds an XML loaded file, DOM's method allows to extract data.

onreadystatechange property that takes a function as value that is invoked when the readystatechange event is dispatched.

Methods

open(mode, url, boolean) mode: type of request, GET or POST

url: the location of the file, with a path.

boolean: true (asynchronous) / false (synchronous).

optionally, a login and a password may be added to arguments.

send("string")null for a GET command.

Building a request, step by step

First step: create an instance

This is just a classical instance of class, but two options must be tried, for browser compatibility.

if (window.XMLHttpRequest)// Object of the current windows

{

xhr = new XMLHttpRequest();// Firefox, Safari, ...

}

else

if (window.ActiveXObject)// ActiveX version

{

xhr = new ActiveXObject("Microsoft.XMLHTTP");// Internet Explorer

}

or exceptions may be used instead:

try {

xhr = new ActiveXObject("Microsoft.XMLHTTP");// Trying Internet Explorer

}

catch(e)// Failed

{

xhr = new XMLHttpRequest()

}

Second step: wait for the response

Further response and handling are included in a function, the function returns are to be assigned to the onreadystatechange property of the object previously created.

xhr.onreadystatechange = function() { // instructions to process the response };

if (xhr.readyState == 4)

{

// Received, OK

} else

{

// Wait...

}

Third step: make the request itself

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.

xhr.open('GET', 'http://www.xul.fr/somefile.xml', true);

xhr.send(null);

Examples

Get a text

function submitForm()

{

var xhr;

try {xhr = new ActiveXObject('Msxml2.XMLHTTP');}

catch (e)

{

try {xhr = new ActiveXObject('Microsoft.XMLHTTP');}

catch (e2)

{

try {xhr = new XMLHttpRequest();}

catch (e3) {xhr = false;}

}

}



xhr.onreadystatechange= function()

{

if(xhr.readyState== 4)

{

if(xhr.status== 200)

document.ajax.dyn="Received:"+ xhr.responseText;

else

document.ajax.dyn="Error code " + xhr.status;

}

};

xhr.open(GET, "data.txt",true);

xhr.send(null);

}

Ajax Tutorial- Loads of Information Available Online

It’s often a difficult scenario on the part of an I.T aspirant to get into a thorough analysis of the particular subject matter but since the advent of internet as a valuable source of information, there have been the emergence of tutorials that are available online related to Ajax. The first and foremost tutorial defines Ajax that stands for Asynchronous JavaScript and XML. It is the use of the nonstandard XMLHttpRequest object to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including XML, HTML, and even text files. The tutorial provides with Ajax’s most appealing characteristic, of having an “asynchronous” nature, which means it can do all of this without having to refresh the page.

The Ajax tutorial gives an introduction to ECMAScript for XML (E4X), a simple extension to JavaScript, XML scripting very easy. The tutorial has information on how asynchronous requests with JavaScript and Ajax, information about making Ajax - Try / Catch blocks of code, sending requests with XMLHttpRequest to allow user to make requests and receive replies by AJAX a Web site, form validation with AJAX / PHP / MySQL, and Ajax callbacks, where user sets the onreadystatechange property of the XMLHttpRequest object to the name of the function to be executed. Then, if the server processes the request, it will automatically call this function to build Ajax-enabled applications using Dojo and JSON to two very different but complementary technologies that will significantly enhance the user interface and usability of Web applications and More Related Tutorials.

There are mini-tutorials on the black art of iframes and browser history, known to AJAX experts but rarely presented clearly, mini-tutorial on saving state across page loads on the client side, without using cookies so as to save large amounts of data beyond cookies size limits, valuable and effective resource on Easy Ajax with jQuery, Top Ajax Poller Scripts, fast introduction to the basics of Ajax for people that already know how to write the server-side part of the process using servlets and JSP, AJAX username availability checking that allows a user who is registering for your site to see if the username they want to use is taken already or not, without having to submit a form and reload the page, RadAjaxPanel that exposes a rich set of client-side events which allow for easy and flexible use in a wide range of application scenarios and tutorial that explains on how to work with the XML Response or "The X-Files" and more in line in order to enhance and learn new aspects in Ajax. Online education therefore is the most reliable and active source for gaining knowledge for I.T. aspirants through, Asp, Java and Ajax tutorial and the internet is a vast knowledge based environment making things a little more easy with downloadable and accessible information relevant to AJAX.