AJAX Callback functions


AJAX – Asynchronous JavaScript and XML

AJAX is a technique for creating fast and dynamic web pages with the help of XML, HTML, CSS, and Java Script. Ajax uses XHTML for content, CSS for presentation, along with Document Object Model and JavaScript for dynamic content display. XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.
Ajax makes it possible to update parts of a web page, without reloading the whole page. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes.
<![if !vml]>
<![endif]>
AJAX Client – Server Architecture

AJAX Working
When user first visits the page, the Ajax engine is initialized and loaded. From that point of time user interacts with Ajax engine to interact with the web server. The Ajax engine operates asynchronously while sending the request to the server and receiving the response from server. Ajax life cycle within the web browser can be divided into following stages:

<![if !supportLists]>1.    <![endif]>User Visit to the page:  User visits the URL by typing URL in browser or clicking a link from some other page.

<![if !supportLists]>2.    <![endif]>Initialization of Ajax engine: When a page is initially loaded, the Ajax engine is also initialized and it continuously refreshes the page content without reloading the whole page.

<![if !supportLists]>3.    <![endif]>Event Processing Loop:
<![if !supportLists]>a.    <![endif]>Browser event may instruct the Ajax engine to send request to server and receive the response data
<![if !supportLists]>b.    <![endif]>Server response - Ajax engine receives the response from the server. Then it calls the JavaScript call back functions
<![if !supportLists]>c.    <![endif]>Browser update – JavaScript request call back functions is used to update the browser. DHTML and CSS is used to update the browser display.

<![if !vml]>
<![endif]>



Callback functions in AJAX

The need for callback functions is to run code in response to an event. When Synchronous operations are carried out, they are executed one after the other. For example, when a request is made to a server, the client waits until the response is received before executing any other code. But in AJAX, the operations are asynchronous, which means the client makes a request to the server, but does not wait for the response. Instead it carries out other operations in background. This will run into problems if the executing code depends on the server response data.
Consider for example, if function B depends on response from function A it should be called only when function A finishes. To ensure this in asynchronous executions like AJAX, callback functions are used. Function B is only called after function A is finished and function A is actually the one responsible for calling function B from last line of function A. The different kinds of callback functions are
<![if !supportLists]>      1.      <![endif]>Anonymous function
<![if !supportLists]>      2.      <![endif]>Named function (A function name is passed as a parameter to another function and is called from inside the function)

Working of Ajax callback functions
<![if !supportLists]>      1.      <![endif]>Ajax callbacks always start in JavaScript. Some JavaScript code in the browser executes and sends a message (or data) to the server, and specifies the page on the server that will receive the message.
<![if !supportLists]>      2.      <![endif]>On the server side, the message from the browser is received and the page that was specified is run.
<![if !supportLists]>      3.      <![endif]>When the browser receives the response from the server, which is usually a JavaScript code, it executes that code and then calls the callback function. 



Example program:
// 1. Callback – Anonymous Function

<!DOCTYPE html>
<html>
<head>
<script>
function loadDoc()
{
     var xhttp = new XMLHttpRequest();

     // Callback using Anonymous Function
     xhttp.onreadystatechange = function()
     {
          if (this.readyState == 4 && this.status == 200)
          {
              document.getElementById("id1").innerHTML = this.responseText;
          }
     };
     xhttp.open("GET", "Hello.txt", true);
     xhttp.send();
}
</script>
</head>
<body>
<div id="id1">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>




Example program:
// 2. Callback – Named Function

<!DOCTYPE html>
<html>
<head>
<script>
function loadDoc(fncall)
{
     var xhttp=new XMLHttpRequest();
 
     xhttp.onreadystatechange = function()
     {
          if (this.readyState == 4 && this.status == 200)
          {
              fncall(this);
          }
     };
     xhttp.open("GET", "Hello.txt", true);
     xhttp.send();
}

function CallBkFn(xhttp)
{
     document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>
</head>
<body>
<div id="demo">
<h2>Ajax callback functions </h2>
<button type="button" onclick="loadDoc(CallBkFn)">
     Change Content
</button>
</div>
</body>
</html>

No comments:

Post a Comment

Don't be a silent reader...
Leave your comments...

Anu