Click Here to download the game. You will need to install .NET framework 2.0 for the game to work properly. The game works only in Windows XP/ Vista.
Bharath
Click Here to download the game. You will need to install .NET framework 2.0 for the game to work properly. The game works only in Windows XP/ Vista.
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.....