Ajax基础-XMLHttpRequest对象的创建、数据请求和…

2008-02-23 09:13:08来源：互联网阅读 ()

XMLHttpRequest是Ajax的基础对象。异步的数据请求是通过这个对象来实现的。下面的代码是建立XMLHttpRequest对象的示例。

代码在IE6、FireFox1.5、NetScape8.1、Opera8.54调试通过。服务器为Window2000 IIS5

1、创建XMLHTTPREQUEST对象

var xhr;
var requestType = "";

//xhr = new XMLHttpRequest();

function createXMLHttpRequest()
{
if (window.ActiveXObject) // IE下创建XMLHTTPREQUEST
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) // 其他浏览器创建XMLHTTPREQUEST
{
xhr = new XMLHttpRequest();
}
}

这种方法对于低版本的IE不适合。

2、XMLHTTPREQUEST对象请求数据

function startRequest(requestedList)
{
if (xhr)
{
requestType = requestedList;
createXMLHttpRequest();
xhr.onreadystatechange = handleStateChange;
xhr.open("GET","../ajax/paraseXML.xml",true);
xhr.send(null);
}
else
alert("XMLHTTPREQUEST IS FALSE");
}

这是个处理XML文档的示例，请求的文件是paraseXML.xml文件
这里需要说明的是：如果请求的是一个HTML文件，服务器对象会将所有的标签全部返回，包括<HTML>、<head>、<meta>等标签。响应数据如果包含HTML标签，最好把这些标签去掉。

3、XMLHTTPREQUEST对象返回数据处理

function handleStateChange()
{
if (xhr.readyState == 4)
{
if (xhr.status == 200)
{
if (requestType == "north")
{
listNorthStates();
}
if (requestType == "all")
{
listAllStates();
}
}
}
}

4、数据处理函数

function listNorthStates()
{
// xhr 为XMLHTTPREQUEST对象
// xmlDoc为XMLHTTPREQUEST响应的XML文档对象
var xmlDoc = xhr.responseXML; // 取得XML文档对象
var northNode = xmlDoc.getElementsByTagName("north")[0]; // 取得所有处于北方的节点
var northStates = northNode.getElementsByTagName("state"); // 在处于北方的节点中提取省份数据
outputList("north States", northStates); // 输出省份数据
}

function listAllStates()
{
var xmlDoc = xhr.responseXML;
var allStates = xmlDoc.getElementsByTagName("state"); // 取得所有的省份数据
outputList("All States in document ",allStates); // 输出省份的数据
}
/**********************************************************
// 输出数据
// title: 输出数据的标题
// states: 输出数据来源
********************************************************/
function outputList(title,states)
{
var out = title;
var currentState = null; // 初始化省份对象
for (var i = 0; i < states.length; i ) // 列出Ststes对象的所有数据,生成输出串
{
currentState = states[i]; // 取得当前的省份
// 生成输出HTML字符串
out = out "<ul><font face='仿宋_GB2312'><span style='font-size: 9pt'>";
out = out "<li>" currentState.childNodes[0].nodeValue "</li>";
out = out "</span></font></ul>";
}
// 取得输出串的对象,输出生成的字符串

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有