AJAX

AJAX Seminar Report
AJAX is an acronym for Asynchronous JavaScript and XML. Ajax is a set of technologies being used together in a particular way and has an architectural style. Ajax is not a new programming language. It provide a new way to existing standards. It is the art of exchanging data with a server and update parts of a web page without reloading the whole page. It contain interrelated web development techniques used on client side to create asynchronous web applications. Ajax applications were used in recent google applications. Neither Adaptive Path nor Google invented Ajax. The term Ajax was introduced by Jesse James Garett in 18 February 2005 in an article "Ajax: A New Approach to Web Applications". Examples of applications using AJAX are Google Maps, Gmail, Youtube, and Facebook tabs.

Development of AJAX
During 1990's web sites based on complete HTML pages required that the page be reloaded from the server on each user action. This was inefficient due to content disappear and reappear. Each time page reloaded due to a partial change, all of the content had to be resent, even though only some of the information had changed. This resulted in additional load on the server and used excessive bandwidth. To solve the problem, the iframe tag was introduced by Internet Explorer to load content asynchronously. The client script XMLHttp component was implemented by Microsoft Outlook Web Access team. The XMLHTTP ActiveX control in Internet Explorer 5 created by Microsoft utilized its iframe technology to dynamically update the news stories and stock quotes on the default page for Internet Explorer was later adopted by Mozilla, Safari, Opera and other browsers as the XMLHttpRequest JavaScript object. The background HTTP requests to server and asynchronous web technologies are hidden until it started appearing in online applications such as Outlook Web Access and Oddpost.Around 2004 Google started the usage of Ajax with Gmail and Google Maps.

With the help of Ajax, a user can send and retrieve data from server asynchronously in the background without interference in the display or behavior of the existing page. Data retrieved using the XMLHttpRequest object. No relation to its name means instead of XML JSON used and requests may or may not be asynchronous. It is a group of technologies.HTML and CSS are used in combination to mark up and style information. JavaScript to bring these technologies together. JavaScript with DOM access used for dynamically display, and to allow the user to interact with the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads. AJAX is a technique for creating fast and dynamic web pages.Other formats such as performatted HTML or plain text can also be used with JSON for the interchange of data.

How AJAX Works
The user's browser create an XMLHttpRequest object and send HttpRequest to the internet when an event occurs.The server on the other side processes HTTPRequest and create a response.Then the response and data is sent back to the browser through the internet.The browser processes the returned data using Javasscript and update the page content.An example ajax program is:
Code:
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
This application contains one div section and one button.The div section will be used to display information returned from a server. If the button clicked function named loadXMLDoc() gets called. Modern browsers such as IE7+, Firefox, Chrome, Safari, and Opera have a built in XMLHttp Request object. Old versions of Internet Explorer such as IE5 and IE6 uses an ActiveX Object. In order to handle all modern browsers including IE5 and IE6 check if the browser supports the XMLHttpRequest
object. If it does, create an XMLHttpRequest object otherwise create an ActiveXObject. The XMLHttpRequest object is used to exchange data with a server.

To send a request to a server, use the open() and send() methods of the XMLHttpRequest object. The open() specifies the type of request either get or post, the URL, and if the request should be handled asynchronously or not. The send() used to send the request off to the server. Get method is used in most cases but when cached file is not an option, to send large amount of data to server, to send user input containing unknown characters post is more secure than get. The url parameter of the open() method, is an address to a file on a server. The file can be any kind of file such as (dot)txt and (dot)xml or server scripting files like (dot)asp and (dot)php which can perform actions on the server before sending the response back. For the XMLHttpRequest object to behave as AJAX, the asynchronous parameter of the open() method has to be set to true.It is a huge improvement for web developers. Tasks performed by web server are time consuming. Before AJAX, this operation could cause the application to hang or stop.To get the response from a server, use the responseText or responseXML property of the XMLHttpRequest object. Use responseText to get the response data as a string and with responseXML get the response data as XML.When a request to a server is sent, some actions needs to be performed based on the response. The onreadystatechange event is triggered every time the readyState changes which hold the status of the XMLHttpRequest. Three important properties of the XMLHttpRequest object:The onreadystatechange property store a function or the name of a function to be called automatically each time the readyState property changes. The readyState property holds the status of XMLHttpRequest. Changes from 0 to 4 where 0 is used for request not initialized, 1 for server connection establish, 2 for request receive, 3 for process request, 4 for request finish and response is ready. The status containing 200 shows ok and 404 display the page not found error. When readyState is 4 and status is 200, the response is ready. A callback function is a function passed as a parameter to another function. If more than one AJAX task on a website, create one standard function for creating the XMLHttpRequest object, and call this for each AJAX task. The function call should contain the URL and what to do on onreadystatechange which is probably different for each call.AJAX is used for exchange of data with a server and update the parts of a web page without web page reloading based on internet standards. While using ajax, the JavaScript does not have to wait for the server response, but can instead execute other scripts while waiting for server response and also deal with the response when the response ready.

AJAX Drawbacks

The pages created in pre HTML5 browsers use successive Ajax requests which did not automatically register themselves with the browser's history engine.So clicking the back button in the browser may not return to an earlier state of Ajax enabled page but return to fully visited last page before it.If fine grained tracking of page state is required, the use of iframe to trigger browser history changes is required.For accessing and monitoring Ajax pages, change the URL fragment identifier. Dynamic web page updates also make it difficult to bookmark and return to a particular state of the application.Solution for this problem is the use of fragment identifier itself. Dynamic page updates interfere disruptively with user interactions if working on an unstable Internet connection. For instance, editing a search field may trigger a query to the server for search completions, but the user may not know that a search completion popup is forthcoming, and if the internet connection is slow, the popup list may show up at an inconvenient time, when the user has already proceeded to do something else. If working on an unstable Internet connection, dynamic page updates may interfere disruptively with user interactions. Indexable Web applications should provide an alternative means of accessing the content that would normally be retrieved with Ajax, thereby allowing search engines to index it . It is easy to make links and form usage in smartphones and PDA not depended on Ajax, since it works only with the support of JavaScript or XMLHttpRequest. The WAI-ARIA standards provide a way to use Ajax instead of screen reading technologies such as JAWS. There are methods to enable security feature of Ajax by using a Cross Domain Communications channel embedded as an iframe within a page or by the use of JSONP. The asynchronous call back style of programming required can lead to complex code that is hard to maintain, to debug and to test.

Conclusion

Thus AJAX based on internet standards, and uses a combination of: XMLHttpRequest object used to exchange data asynchronously with a server, JavaScript or DOM is used to display and interact with the information, CSS is used to style the data and XML used as the format for transferring data. And also AJAX applications are browser and platform independent.

References:

http://www.w3schools.com/ajax/default.ASP
http://en.wikipedia.org/wiki/Ajax_%28programming%29
http://www.adaptivepath.com/ideas/ajax-n...plications