Below is a very very simple AJAX example. This is intended for AJAX starters and is not for people who already know about AJAX.
- Asynchronous Java and XML has been the buzzword for the last couple of years. Though it is being used for a very long time now, the term AJAX was coined recently. AJAX is an attempt to give the web user an interactive, quick and rich user experience while navigating through your web application. Normally while requesting pages, every request causes a roundtrip to the server causing the page to freeze and prevents the user from doing any kind of interaction with the page. AJAX moves away from this feature where the user can continue working with the page while requests to the server happen in the background. A very good example of this is
object. This object is responsible for opening the connection to the server and sending the request. Once request is complete and data is recieved, the page elements can be modified/updated as needed.
In the below example, when you hover over the label, the sendRequest method gets called which is responsible for opening the connection and sending the request to the "
" page on the server. This page just outputs the text "Hello World". The client callback function (
) gets triggered everytime the request state changes and raises an alert once the callback is complete.
1: <html xmlns="http://www.w3.org/1999/xhtml">
2: <head>
3: <title>Basic AJAX Example</title>
4: <script type="text/javascript">
5: var xmlHTTP = null;
6: //This method gets called everytime the request state changes
7: function callBackFunction()
8: {
9: //check to see if the status of the request has changed
10: //other states are 0 = created but not initialized (open method not yet called),
11: // 1 = initialized (sent method not yet called),
12: // 2 = sent request (response text and response body not available),
13: // 3 = recieved request (response text and response body not available),
14: // 4 = all data has been recieved (response text and response body available)
15: if(xmlHTTP.readyState == 4)
16: {
17: //check to see if the status is ok
18: if(xmlHTTP.status == 200)
19: {
20: alert('call back completed and data is recieved from the server');
21: }
22: }
23: }
24:
25: //This method creates the xmlHTTPRequest object and sends the request
26: function sendRequest()
27: {
28: //check the browser and instantiate the appropriate object -- IE 7, Mozilla
29: if(window.XMLHttpRequest)
30: {
31: xmlHTTP = new XMLHttpRequest();
32: }
33: //Previous versions of IE like IE 5 and old browsers
34: else if(window.ActiveXObject)
35: {
36: xmlHTTP = new ActiveXObject(Microsoft.XMLHTTP);
37: //alernative
38: //xmlHTTP = new ActiveXObject(MSXML2.XMLHTTP);
39: }
40: else
41: {
42: alert('Browser not supported');
43: }
44: //open a connection using a xmlHttpRequest object
45: xmlHTTP.open("GET","AjaxResponse.html", true);
46:
47: //set the method to be called when the request status changes
48: xmlHTTP.onreadystatechange = callBackFunction;
49:
50: //send the request
51: xmlHTTP.send(null);
52: }
53: </script>
54: </head>
55: <body>
56: <label id="label1" onmouseover="sendRequest();">Hover over me</label>
57: </body>
58: </html>
Again, this is a very simple example and you should be able to find more advanced and complicated examples on the web. The page elements can be modified using javascript to insert the response text on the calling page.
