Performing a Server Request Asynchronously






<%@ Page Language="C#" AutoEventWireup="true" CodeFile="XmlHTTP2.aspx.cs" Inherits="XmlHTTP2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>

<script type = "text/javascript" language="javascript">
var xmlHttpObj;
if (window.ActiveXObject) {
try {
xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
}
}
else xmlHttpObj = new XMLHttpRequest();
function LoadCustomers() {
if (xmlHttpObj) {
// We want this request synchronous
xmlHttpObj.open("GET", "http://" + location.host + "/MyPractice/DataFile.xml", false);
// Execute the request
xmlHttpObj.send(null);
// If the request was ok (ie. equal to a Http Status code of 200)
if (xmlHttpObj.status == 200) {
var xmlDoc = xmlHttpObj.responseXML;
// Our list of <CUSTOMER> nodes selected using the X Path argument
//var nodes = xmlDoc.selectNodes("//Customers/Customer");
var nodes = xmlDoc.selectNodes("//Customers/Customer/Lastname/text()");
// Obtain a reference to the <SELECT> drop list control.
var ctrl = document.getElementById("ddlCustomers");
for (var i = 0; i < nodes.length; i++) {
// Get the lastname element from our XML data document
var lastName = nodes[i].nodeValue;
// Create a new <OPTION> node.
var htmlCode = document.createElement('option');
// Add the new <OPTION> node to our <SELECT> drop list
ctrl.options.add(htmlCode);
// Set the <OPTION> display text and value;
htmlCode.text = lastName;
htmlCode.value = lastName;
}
}
else {
alert('There was a problem accessing the Customer data on the server.!');
}
}
}

function DisplayCustomerDetails() {
if (xmlHttpObj) {
// We want this request asynchronous
//debugger;
xmlHttpObj.open("GET", "http://" + location.host + "/MyPractice/DataFile.xml", true);
xmlHttpObj.onreadystatechange = function() {
if ( xmlHttpObj.readyState == 4 ) {
var ctrl = document.getElementById("ddlCustomers");
var doc = xmlHttpObj.responseXML;
var lastName = ctrl.options[ctrl.selectedIndex].value;
var node = doc.selectSingleNode("//Customers/Customer[Lastname='" +lastName + "']");
var details = 'Fullname : ' + node.selectSingleNode('Firstname / text()').nodeValue + '' + lastName + '. Email : ' + node.selectSingleNode('email / text()').nodeValue;
document.getElementById("spnDetailDisplay").childNodes[0].nodeValue = details;
}
}
// Execute the request
xmlHttpObj.send(null);
}
}
</script>
</head>
<body onload="LoadCustomers();">
<form id="form1" runat="server">
<div>
<select id="ddlCustomers" onchange="DisplayCustomerDetails();">
<option value="">- Select a Customer -</option>
</select>
<hr />

<p>
Details:</p>
<span id="spnDetailDisplay">(You have not made a selection yet.)</span>

</div>
</form>
</body>
</html>
DataFile.xml



<?xml version="1.0" encoding="utf-8" ?>
<Customers>
<Customer>
<Firstname>Joe</Firstname>
<Lastname>Bloggs</Lastname>
<email>joe@bloggs.com</email>
</Customer>
<Customer>
<Firstname>Alan</Firstname>
<Lastname>Anonymous</Lastname>
<email>anon@ymous.com</email>
</Customer>
<Customer>
<Firstname>Marvin</Firstname>
<Lastname>Martian</Lastname>
<email>marvin@mars.com</email>
</Customer>
</Customers>

No comments:

Post a Comment