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