XMLHTTPRequest.rar
As You might have known, ASP.NET 2 uses a control called Script manager to handle all asynchronous calls from the client. ASP.NET also facilitates developers by providing built in support for AJAX using updat panel control and script manager. This definitely make life easier for developers. But AJAX is abbreviation of Asynchronous Javascipt And Xml....What is the role of javascript and XML in AJAX??
Normally all webpages uses Hyper Text Transfer Protocol(HTTP) to transfer data between server and client. In this protocol, a client requests a webpage to the server using a HTTP-GET request and the server sends the page to the client...If the client wants to send some data back to server (viz. login information) a HTTP-POST is done...the server processes the posted data and again returns the page to the client....In this process, any GET or POST request causes the entire page on the client-side to refresh....Is it essential to refresh the entire page just to send(post) a small amount of data back to server?? Does the page with lots of interaction with server (think of gmail page) not take long time to load after every POST operation?? Yes, it does take long time to load using HTTP protocol.... the solution to this problem is to use XMLHTTP protocol, commonly known as AJAX.
This block diagram shows a typical HTTP protocol. As u can see there is no arrow connecting 2 "user action". So once a post is done the user cannot do anything until the server response is received. This is a synchronous model...Compare this with block diagram of XMLHTTP protocol shown a few lines below
I shall call the method by which the XMLHTTP posts a request to the server as CALLBACK.... Unlike HTTP-GET/POST request, XMLHTTP-CALLBACK does'nt cause the page on client side to get refreshed. This kind if request is called Asynchronous request. The block diagram of XMLHTTP is given below
Unlike HTTP, here the "User action" blocks are connected. So even if a CALLBACK is under process, the user can continue working with the webpage. This is an ansychronous model.
Different browsers use different ways to implement XMLHTTP protocol. Two common ways are
1) To use a native XMLHTTP object. IE7, Mozilla, Safari, and so on use native object.
2) To use ActiveX object. IE5.x and IE6 use ActiveX objects.
To create either of the 2 objects, we use javascript. Here is a .js file that contains a function to create XMLHTTP / ActiveX object....
---------------------------------XMLHTTPRequestobject.js-----------------------------
var READYSTATE_UNINITIALIZED = 0;
var READYSTATE_LOADING = 1;
var READYSTATE_LOADED = 2;
var READYSTATE_INTERACTIVE = 3;
var READYSTATE_COMPLETE = 4;
var HTTPSTATUS_OK = 200;
function createxmlhttprequestobject(){
if (ActiveXObject)//for IE 5.x & 6
{
try
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
return new ActiveXObject("Msxml2.XMLHTTP");
}
}
else //for other browsers
{
return new XMLHttpRequest();
}
}
-----------------------------------------------------------------------------------------------
The use of global variables that are declared in the file will be explained subsequently...
Here are some of the properties and methods of XMLHTTP / ActiveX objects that will be used in the code to initiate asynchronous request.
Properties
onreadystatechange - Sets or retrieves the event handler for asynchronous requests.
readyState - Retrieves the current state of the request operation.
responseBody - Retrieves the response body as an array of unsigned bytes.
responseText - Retrieves the response body as a string.
responseXML - Retrieves the response body as an XML.
status - Retrieves the HTTP status code of the request.
statusText - Retrieves the friendly HTTP status of the request.
Methods
open - Assigns method, destination URL, and other optional attributes of a pending request.
send - Sends an HTTP request to the server and receives a response.
Now global variables declared in xmlhttprequestobject.js are the different possible values of readystate property. Instead of using numbers using variable names in the code improves readability of th code..
READYSTATE_UNINITIALIZED = 0;
READYSTATE_LOADING = 1;
READYSTATE_LOADED = 2;
READYSTATE_INTERACTIVE = 3;
READYSTATE_COMPLETE = 4;
The .aspx file is given below. Read the comments for code explanation...
------------------------------------Default.aspx-----------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="XMLHTTPRequestObject.js">
</script>
<script type="text/javascript">
<!--
function bload(){
var xmlhttpobj = createxmlhttprequestobject();//creates XMLHTTP/ActiveX object
xmlhttpobj.open("GET", "http://" + location.host + "/AJAX trials/XMLFile.xml",false);
//used to specify the type of request, URL of server, and whether this is Asynchronous request or not
xmlhttpobj.send(null);//sends the request to server
if (xmlhttpobj.status == HTTPSTATUS_OK)//Checks whether the status of the request is OK
{
var textdoc = xmlhttpobj.responseText;//captues the response sent by the server as text
var xmldoc = xmlhttpobj.responseXML; //captues the response sent by the server as XML
var nodes = xmldoc.selectNodes("//bookstore/books/Title/text()");
//Since v requested for XML File v use XPath to traverse to the desired node
for (var i = 0; i < nodes.length; i++)//Adds all desiered nodes to listbox
{
var opt = document.createElement("option");
var val = document.createTextNode(nodes[i].nodeValue);
opt.appendChild(val);
opt.value = nodes[i].nodeValue;
document.getElementById("select1").appendChild(opt);
}
}
}
function selectchange(){
var xmlhttpobj = createxmlhttprequestobject();
xmlhttpobj.open("GET", "http://" + location.host + "/AJAX trials/XMLFile.xml",true);
//onready
xmlhttpobj.onreadystatechange = function(){
readystate_change(xmlhttpobj);
}
xmlhttpobj.send(null);
}
function readystate_change(xmlhttpobj){
if (xmlhttpobj.readyState == READYSTATE_COMPLETE)
{
var xmldoc = xmlhttpobj.responseXML;
var book = document.getElementById("select1").options[document.getElementById("select1").selectedIndex].value;
var nodes = xmldoc.selectSingleNode("//bookstore/books[Title = '" + book + "']")
var fn = nodes.selectSingleNode("Author/Firstname/text()").nodeValue;
var ln = nodes.selectSingleNode("Author/Lastname/text()").nodeValue;
document.getElementById("div1").innerHTML = "BOOK TITLE : " + book + "<br>" + "AUTHOR : " + fn + " " + ln;
}
}
//-->
</script>
</head>
<body onload = "return bload();">
<form id="form1" runat="server">
<div>
<select id="select1" onchange = "return selectchange();">
<option value="">Select a Book</option>
</select>
</div>
<div id = "div1">You are yet to make a selection</div>
</form>
</body>
</html>
---------------------------------------------------------------------------------------------
When the page loads the client makes a synchronous request to server for an XML File that contains details about some books. The title of these books are loaded into a listbox. When the user clicks on a book title, the client makes an asynchronous request to the server for the XML File and writes the author name of the book in div tag.....
