AJAX

AJAX: AJAX stands for Asynchronous Javascript and XML processing. AJAX is not programming language but it is one of the programming concept.

Def: AJAX is the art of exchanging data with a server and update parts of a web page without reloading whole page.

1.      AJAX applications are browser-platform independent

2.      AJAX can be used for creating rich, web-based applications that look and works like a desktop application.

3.      With AJAX we can create better, faster, and more user-friendly web applications.

4.      AJAX will work based on Javascript and HTTP requests.

5.      AJAX is a type of programming mode which was populared in the year 2005 by Google(With Google suggest)

AJAX is the use of non standard XMLHTTPRequst object to communicate with server side scripts. It can send as well as receive information in variety of formats includeing XML. HTML, and even text files. AJAX’s most appealing characterstics, however, it its “asynchronous” nature, which means that it can do all of this without having to refresh the page. This allows us to update protions a page based upon server events.

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

HTML and CSS for presenting.

Javascipt for local processing data inside the page or to access  elements of XML file read on the server(with the getElementByTagName method for example)

Optionally….

The DOM parser class may used

JSP or another scripting language may be used

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

SOAP may be used to dialog with the server.

Asynchronous: Asynchronous means getting the response of the server without reloading current web page.

Synchronous: Synchronous means getting response of the server each and every time after reloading the web page.

Why to use AJAX: It is used mainly to build a fast, dynamic website, but also resources. For improving sharing of resources, it is better to use the power of all client computers sharing of resources. It is better to use the power of all the client computers rather than just unique server network. AJAX allows performing processing on client computer (in JavaScipt) with data taken from the server.

  The processing of web page formerly was only server-side, using services or PHP scipts, before the whole page was sent within the network. But AJAX can selectively modify a part of a page displayed by the browser, and update it without the need to reload the whole document with all images, menus etc..

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

How does AJAX work: AJAX uses a programming model with display and events. These events are user actions they call functions associated to elements of the web page.

      Interactively it is achieved with form and buttons. DOM allows linking elements page with actions and also extracting data from XML files provided by the server.

The keystone of AJAX is the XMLHttpRequest

XMLHttpRequest:

All modern browsers support the XMLHttpRequest object(IE5 and IE6 uses an ActiveX object)

The XMLHttpRequest object is used to exchange data with a server behind the scenes. This means that it is possible to update parts of web pae, without reloading whole page.

How to create an XMLHttpRequest Object:

All modern browsers(IE7+, Firefox, Chrome, safari and opera) have a built-in XmlRequest object.

Syntax for HttpRequest Object:

Variable=new XMLHttpRequest();

Syntax for ActiveXObject(IE5 and IE6) use an ActiveXObject

Variable=new ActiveXObject(“Mirosoft.XMLHTTP”);

To work with AJAX, XMLHttpRequest object(AJAX engine) provides us four methods and six properties.

The two methods provided by XMLHttpRequest objects are

1. Open(“GET/POST(Any http method),url,true/false)

2. send() or send(String)

3. setRequestHeader(header_name,header_value)

4. overrideMIMEType(“text/html”)  (supported by only firefox)

Method	Description
Open(http_method,url,async)	Specifies the type of reuqst, the URL, and if the request should be handled asynchronously or not. Method: the type of request: GET or POST or any other http method url: the location of the file on the server async: true(asynchronous) or false (synchronous)
Send	Send request  to the server.
Send(String)	Only used for POSt methods
setRequestHeader(header,value)	Add HTTP headers to the request. Header: specifies the header name Value: specifies the header value

GET: GET is simplifier and faster than post, and can be used in most cases.

POST: A cached file is not an option (update a file or database on the server)

Sending a large amount of data to the server(POST has no size limitations)

Sending user input(which can contain unknown characters), POST is more robust and secure than GET.

EX: A simple GET method is shown below

xmlhttp.opn(“GET”,”demo_get.jsp”,true);

xmlhttp.send();

If we want ot send information with theGET method, add the information to the URL

xmlhttp.open(“GET”,”demo_get2.jsp?fname=sachin&lname=Tendulkar”true)

xmlhttp.send();

AJAX has given six properties. Those are listed below.

1.      Onreadystatechange

2.      readyState

3.      status

4.      responseText

5.      responwXML

6.      StatusText:

Onreadystatechange: This property holds or contains the name of the Javascipt function to be called whenever response from the server is received by the AJAX engine. While working with AJAX, we need to take the support of minimum of two Javascript functions

One for sending the request to the server and another for receiving response from the server.

EX:

function f1()

{

var x=new ActiveXObject(“Microsoft.XMLHTTP”);

x.onreadystatechange=fun2;

---------------    

x.open(-,-)

x.send();

ReadyState:

This property holds the status of the request.

This value of this property will be dynamically changed.

Ready state property values are varied from 0 to 4.

     0: request not initialized: AJAX engine is created, but open(-,-) is not called.

     1: server connection established: Means that open(-,-,-) is called

     2: Request received: means that send() is called

     3: Processing request: Means that request is under processing.

     4: Request finished and response is ready: Means that response for the request is generated  by the server.

3. Status: Status attributes holds different status codes to know the status of the response returned by the server.

100-109: represents info

200-299: represents success response

300-399: represents redirection

400-499: represents incomplete web resource

500-599: represents server error

4. ResponseText: This property holds the response data returned by the server for the given req

    request

5. ResponseXML: This property holds the response generated by the server for the given

     requests.

6. StatusText: StatusText is generated text message of response text.

Procedure to develop AJAX code to interact with the web resourece program of web application:

1. Make web page generate javascript call based request.

EX: Enter country: <input type=”text” name=”t1” onKeyup=”f1()”/>

When the key of keyboard is pressed and released to type a letter in the text.

Here “onKeyup” even is raised and it calls the javascript function “f1()”

Step2: Keep AJAX engine ready in the JavaScript function definition.

Function f1()

{

If(window.XMLHttpRequest)  //object of the current window

{

Var areng=new XMLHttpRequest() //code for IE+7, Firefox, Chrome, Opera

}

else if(window.ActiveXObject) //ActiveX version

{

Var aeng=new ActriveXObject(“Mircosoft.XMLHTTP”)  //code for IE6,7

}

------   

----------    

}

3. Specify the name fo the call back function to AJAX engine.

aeng.onreadystatechange=connection;

The dunction that specified “connection” Javascript function will be called automatically by Ajax engine for each change that takes place in readyState. Property values like 0-1,1-2,1-3,1-4

readyState property value is “4”

4. Process the request of the url having query string.

//read from data

var String=document.f1.t1.value;

//frame request url

var url=”test.jsp?q=”+strng;

5. Makes AJAX engine send request to targe web resource program asynchronously

Aseng.open(“GET”,url,truye)

6. Develop targe web resource program like servlet or jsp

7. Define callback function definition(java script function) having logic to update webpage content when AJAX engine’s “responseState” is “4” and http response “status” code is “200”.

EX:

Function connection()

{

If(aeng.readyState==4||aeng.readyState==”complete”)

{

-----------------   

-------------------  

}

}

Flow of AJAX engine:

AJAX web architecture:

AJAX web architecture

Disadvantages of AJAX:

• The back and refresh button are rendered useless
  With AJAX, as all functions are loaded on a dynamic page without the page being reloaded or more importantly a URL being changed (except for a hash symbol maybe), clicking the back or refresh button would take you to an entirely different web page or to the beginning of what your dynamic web page was processing. This is the main drawback behind AJAX but fortunately with good programming skills this issue can be fixed.
• Back functionality cannot work because the dynamic pages don’t register themselves to the browsers history engine. Hence the need of Iframe becomes essential.
• The page cannot be bookmarked if implemented using Ajax.
• If java script is disabled , Ajax will not work
• Because different components of the pages are loaded at different times, response time may be slow.
• Because different components of the pages are loaded at different times it may create confusion for the user. 

Advantages of AJAX:

a) Allows feedback, confirmation and errors messages to be displayed on same page/view.
b) Wider variety of controls e.g. sliders, date pickers, windows, tabs, spinners etc.
c) No installation, just an AJAX enabled browser required
d) Higher immunity to viruses and piracy.
e) Reduced load on server resources as processing is distributes over server and client
f) Lowered application development and deployment costs
g) Reduction in network traffic due to more intelligent client and selective data request