AJAX

Ajax (shorthand for asynchronous JavaScript + XML) is a group of interrelated web development techniques used on the client-side to create interactive web applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page.The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages.

Ajax stands “A”: Asynchronous,”JA”: JavaScript”X”: XML. It is a group of (JavaScript and Xml) interrelated web development techniques used on the client side to create interactive web application. Any server side technology that supports JavaScript also supports Ajax.

• Foundation purpose of Ajax not to giving the output, but is to provide a simple and standard means/output for a web page to communicate with the server without doing a complete page refresh.

• Ajax programming is introduced in 2005 by Google.

• Basically it is not a new programming language, but is a way to use existing standards to make the things better, faster and more user-friendly.

HISTORY OF AJAX

In the 1990s, web browsers and web sites were based on static pages and each user action required that the page be re-loaded from the server (or a new page loaded). This could slow down user interaction considerably.

Asynchronous loading of content first became practical when Java applets were introduced in the first version of the Java language in 1995. These allow compiled client-side code to load data asynchronously from the web server after a web page is loaded.[3] In 1996, Internet Explorer introduced the IFrame element to HTML, which also enabled asynchronous loading.[4] In 1999, Microsoft created the XMLHTTP ActiveX control in Internet Explorer 5, which was later adopted by Mozilla, Safari, Opera and other browsers as the native XMLHttpRequest object.[4][5] Microsoft has adopted the native XMLHttpRequest model as of Internet Explorer 7, though the ActiveX version is still supported. The utility of background HTTP requests to the server and asynchronous web technologies remained fairly obscure until it started appearing in full scale online applications such as Outlook Web Access,(2000)[6] Oddpost (2002), and later, notably Google made a wide deployment of Ajax with Gmail (2004) and Google Maps (2005).[7]

The term "Ajax" was coined in 2005 by Jesse James Garrett.[1] However, a patent application covering this type of user interface was filed on September 3, 2003, thus predating the term itself by two years. This application resulted in US Patent #7,523,401 being issued to Greg Aldridge of Kokomo, IN.[8] On April 5, 2006 the World Wide Web Consortium (W3C) released the first draft specification for the object in an attempt to create an official web standard.[7]

WORKING PRINCIPLE OF AJAX

STEPS FOR THE WORKING OF AJAX

In a simple web application, the interaction between the client and the server is going like this:

1. User first accesses a Web application (for example: filling a form, i.e. request the query to the server through a text field or etc.)

2. Server processes the request coming from the browser (client side) and sends data to the browser while the client waits. I.e., As the request is being send to the server the server process the request and sent the response to the same page and the response is received at that page without being refreshing the page, or you can say that the only the desired part is refreshes.

TECHNOLOGY USED IN AJAX

Ajax as a combination of set of technologies.Use of Ajax is combination is of four things -

1: HTML/Xhtml, 2: JAVASCRIPT, 3: XML, 4: CSS.

2. JAVASCRIPT(ECMA Script) used for the local processing and DOM (Document Object model) data access inside the page or access elements of XML file read on the server.

3. Asynchronous data retrieval with XMLHttpRequest object.

SENDING METHODS AND THIER FUNCTIONS

USING THE POST AND GET METHOD

GET AND POST methods are basically used as for sending the data from the form to the data processing page(server), both are used in form data handling process, but they have some difference for using.

DIFFERENCE IN POST AND GET METHOD

GET method: The GET method sends the encoded user information appended to the page request. The page and the encoded information are separated by the “?”. And method is restricted to send unto 1024 characters only. It will display in the address bar with the data sending in the form.

The Get is one the simplest Http method. Its main job is to ask the server for the resource. If the resource is available than it will given back to the user on your browser.

POST method: While in the post method the data send to the server does not any restriction, it does not display in the url, ie the request made by it is goes invisible, so it is a safe method for sending your passwords or private things.

The method is used in the ajax in open and send methods so we define them first.This method is most powerful request.

Sending a request to the server the functions commonly used is:

1: open(("GET","url”,true):

The open method start the connection, in read or write mode, to receive data from the server or send it. It takes three arguments.

First paramenter : Defines the type of the method during a request is to be send(POST or GET).

Second parameter: Is for url of the serverside script(PHP script).

The third parameter :(true) says we're going to make this request asynchronously which means we're going to call the url and then go off and do other stuff without waiting for a response from the server. When the data gets back from the server the browser will call our callback function for us and we can process the data then.

2: send(): Sends the http request to the server. Null or empty with get command, string otherwise.If all the files are in the same folder then:

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

xmlhttp.send(null);

USE OF POST FUNCTIONSUse of post functions:

Usually GET method is used while creating an Ajax application. But it will not be means that the post method is never used in ajax, there are several occasions when post is necessary for creating a Ajax application.Instead, post request are much secure than GET request.

USE OF GET Statement

var url = "get_method.php";

var params = "kam=al&name=eBIZ";

http.open("GET", url+"?"+params, true);

http.onreadystatechange = function() {//It Calls a function when the state changes.

if(http.readyState == 4 && http.status == 200) {

alert(http.responseText);

}

}

http.send(null);

}

AJAX REQUEST

Ajax sends a request to the server with following some method, the methods are “open()” and

“send()”, the open method uses three augments, first is method type, second is defined the url of

the server side script and the third one is specifies that the request should be handled

asynchronously and the send method is sends the request off to the server.

The format of the open and send method are:

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

xmlhttp.send(null);

It Initiates and process an ajax request. It simply allows to interact with the server.

Use:

new Ajax.Request(url[, options])

Actually this object is made for wrapping an instance of XMLHttpRequest and provides the facilities for setting function that are called before a request is made and after a request returns. This is made for handling the server response.Point to be remember that whenever an Ajax request is sent to the server, a special header named “X-Requested-With” with a value of XMLHttpRequest is attached to the request.

Example:

function ajaxReq() {

return (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'));

}

AJAX WORKING WITH BROWSER

Ajax unfortunately doesn’t have same code for all browser, it has little bit different for all the browser. The keystone of Ajax is XMLHttpRequest object. And it will be very necessary for you to know about the XMLHttpObject, how it makes all browser compactible with the code.

DRAWBACKS

*Owing to their dynamic nature, Ajax interfaces are often harder to develop when compared to static pages.

* Pages dynamically created using successive Ajax requests do not automatically register themselves with the browser's history engine, so clicking the browser's "back" button may not return the user to an earlier state of the Ajax-enabled page, but may instead return them to the last full page visited before it. Workarounds include the use of invisible IFrames to trigger changes in the browser's history and changing the URL fragment identifier (the portion of a URL after the '#') when Ajax is run and monitoring it for changes.

* Dynamic web page updates also make it difficult for a user to bookmark a particular state of the application. Solutions to this problem exist, many of which use the URL fragment identifier (the portion of a URL after the '#') to keep track of, and allow users to return to, the application in a given state.