Monday, March 7, 2011

Ajax

Ajax relies primarily on two technologies to work: JavaScript and the XMLHttpRequest. At the heart of Ajax is the ability to communicate with a Web server asynchronously without taking away the user’s ability to interact with the page. The XMLHttpRequest is what makes this possible. Ajax makes it possible to update a page without a refresh. By Ajax, we can refresh a particular DOM object without refreshing the full page.


In here, Ajax is best described anywhere else:
http://www.codeproject.com/KB/ajax/AjaxTutorial.aspx

Example given in this page:
  1. The JavaScript function handEvent() will be invoked when an event occurred on the HTML element.
  2. In the handEvent() method, an instance of XMLHttpRequest object is created.
  3. The XMLHttpRequest object organizes an XML message within about the status of the HTML page, and then sends it to the Web server.
  4. After sending the request, the XMLHttpRequest object listens to the message from the Web server.
  5. The XMLHttpRequest object parses the message returned from the Web server and updates it into the DOM object.
Source:

var xmlHttpRequest;

function GetTime()
{
    //create XMLHttpRequest object
    xmlHttpRequest = (window.XMLHttpRequest) ?
new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");

    //If the browser doesn't support Ajax, exit now
    if (xmlHttpRequest == null)
return;

    //Initiate the XMLHttpRequest object
    xmlHttpRequest.open("GET", "Time.aspx", true);

    //Setup the callback function
    xmlHttpRequest.onreadystatechange = StateChange;

    //Send the Ajax request to the server with the GET data
    xmlHttpRequest.send(null);
}
function StateChange()
{
    if(xmlHttpRequest.readyState == 4)
    {
document.getElementById('lblTime').value = xmlHttpRequest.responseText;
    }
}





.

No comments:

Post a Comment