当我们请求ProductInfo时， 首先它会调用ProcessRequest()方法，接着调用GetAllProducts()方法从数据库中获取数据，然后把数据通过JSON格式写入到响应流中。
现在，我们已经成功地把数据通过JSON格式写入到响应流当中，接着我们将通过Ajax方式请求数据并且把数据显示到页面中。
首先，我们定义方法createXHR()用来创建XMLHttpRequest对象，前面我们提到IE6或者更老的版本不支持XMLHttpRequest()方法来创建XMLHttpRequest对象，所以我们要在createXHR()方法中，增加判断当前浏览器是否IE6或更老的版本，如果是，就要通过MSXML库的一个ActiveX对象实现。因此，在IE中可能遇到三种不同版本的XHR对象（MSXML2.XMLHttp6.0，MSXML2.XMLHttp3.0和MSXML2.XMLHttp）。
复制代码 代码如下:
// Creates a XMLHttpRequest object bases on web broswer.
function createXHR() {
// Checks whether support XMLHttpRequest or not.
if (typeof XMLHttpRequest != "undefined") {
return new XMLHttpRequest();
}
// IE6 and elder version.
else if (typeof ActiveXObject != "undefined") {
if (typeof arguments.callee.activeXString != "string") {
var versions = [
"MSXML2.XMLHttp6.0",
"MSXML2.XMLHttp3.0",
"MSXML2.XMLHttp"];
for (var i = 0; i < versions.length; i++) {
try {
var xhr = new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
return xhr;
}
catch (ex) {
throw new Error(ex.toString());
}
}
return new ActiveXObject(arguments.callee.activeXString);
}
else {
throw new Error("No XHR object available");
}
}
return null;
}
$(document).ready(function() {
GetDataFromServer();
});
前面我们定义了一个比较通用的方法用来创建XMLHttpRequest对象，并且它支持IE6或更老版本创建XMLHttpRequest对象，接下来我们将通过Ajax方法请求数据。
复制代码 代码如下:
function GetDataFromServer() {
// Creates a XMLHttpRequest object.
var req = new createXHR();
if (req != null) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
if ((req.status >= 200 && req.status < 300) || req.status == 304) {
////alert(req.responseText);
var jsonTextDiv = document.getElementById("jsonText");
// Deserializes JavaScript Object Notation (JSON) text to produce a JavaScript value.
var data = JSON.parse(req.responseText);
for (var i = 0; i < data.length; i++) {
var item = data[i];
var div = document.createElement("div");
div.setAttribute("class", "dataItem");
// Inserts data into the html.
div.innerHTML = item.Name + " sold " + item.Qty + "; Product number: " + item.SerialNumber;
jsonTextDiv.appendChild(div);
}
}
else {
alert("Request was unsuccessful: " + req.status);
}
}
};
// Sends a asyn request.
req.open("GET", "ProductInfo.ashx", true);
req.send(null);
}
}
由于前面我们介绍过Ajax发生请求的方法，所以不再重复介绍了，但我们注意到GetDataFromServer()方法中，获取responseText数据（JSON格式），然后通过parse()方法把JSON格式数据转换为Javascript对象，最后把数据插入到div中，页面呈现效果如下：
现在，我们成功地把数据输出到页面当中，也许用户还会觉得用户体验不好，那么我们给就该页面增加CSS样式。
由于时间的关系，我们已经把CSS样式定义好了，具体如下：
复制代码 代码如下: