Ajax使用 XMLHttpRequest 异步加载文档的例子

来源：互联网发布：淘宝客q群推广编辑：程序博客网时间：2024/06/08 12:13

上一节我们了解到可以使用 IFrame、XMLDocument、XMLHttpRequest 来达到异步加载数据的目的，并且主要讲述了XMLHttpRequest异步加载的部分工作原理：首先我们通过getXMLHttpRequest()函数创建了XMLHttpRequest对象，接着使用它来向服务器发送请求，并且我们通过使用回调函数来监视并捕获当前请求的状态。

好了，现在我们来开始本小节的正题，完整地使用 XMLHttpRequest 来加载文档。其实呢，上面的代码，基本已经完成了这个任务，重要的就是我们把我们得到的数据(已存储在变量data中)，输出到应用层。这一部分是学习 Ajax非常重要的一节，因为 Ajax就是异步javascript + XML，所以，异步地来加载文档是非常基础、并且非常重要的。

下面我们来看代码部分。既然我们最重要的已经完成，现在的关键就是data输出到界面，所以，我们来手写这一点，并在后面再付上完整的代码：

首先要创建一HTML的DOM元素：<div id="console"></div>

获得新建DOM元素：var console=document.getElementById("console");

新建一TextNode元素存储data： var txt=document.createTextNode(data); //这里的data就是我们的数据存储变量

将txt添加到console节点上：console.appendChild(txt);

到这里我们就已经完成了所有的任务。

下面是异步加载 data.txt 文档的完整代码，data.txt中请不要使用中文书写，后面我们会讲到原因及其相关内容：

<title>data.txt中请不要用中文字符</title>

var READY_STATE_UNINITIALIZED=0;

var READY_STATE_LOADING=1;

var READY_STATE_LOADED=2;

var READY_STATE_INTERACTIVE=3;

var READY_STATE_COMPLETE=4;

var req;

var console=null;

function sendRequest(url,params,HttpMethod)

{

if(!HttpMethod)

{

HttpMethod="GET"; //加载文档要用GET;数据提交用POST

}

req=getXMLHttpRequest();

if(req)

{

req.onreadystatechange=onReadyStateChange;

req.open(HttpMethod,url,true);

req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

req.send(params);

}

function getXMLHttpRequest()

{

var xRequest=null;

if(window.XMLHttpRequest)

{

xRequest=new XMLHttpRequest();

}

else if(typeof ActiveXObject != "undefined")

{

xRequest=new ActiveXObject("Microsoft.XMLHTTP");

}

return xRequest;

}

function onReadyStateChange()

{

var ready=req.readyState;

var data=null;

if(ready==READY_STATE_COMPLETE)

{

data=req.responseText;

}

else

{

data="Loading...+["+ready+"]";

}

toConsole(data);

}

function toConsole(data)

{

if(console != null)

{

var newline=document.createElement("div");

var txt=document.createTextNode(data);

newline.appendChild(txt);

console.appendChild(newline);

}

window.onload=function()

{

console=document.getElementById("console");

sendRequest("data.txt");

}

</script>

</head>

<body>

</div>

</form>

</body>

</html>

我们来看下输出的结果：
=================================================================
Loading...+[1]
Loading...+[1]
Loading...+[2]
Loading...+[3]
Here is some Text from the server [data.txt].
=================================================================

输出的每一行代表对回调函数的一次单独的调用，它在数据加载状态被调用了两次，每次都加载了一块数据，然后又在交互状态被调用了一次，这个时刻，在处理异步请求的同时，控制权返回了用户界面；接着加载结束的时候被调用了一次，最后，在完成的状态被调用了一次，将响应中的文本显示在屏幕上。

这个例子中我们是利用了XMLHttpRequest对象的responseText属性，以文本字符串的形式获得响应中的数据，对于简单的数据来说，这是很有用的，但是如果我们需要从服务器得到更大的结构化的数据集，就可以使用responseXML属性。如果已经将响应的MIME类型正确设置为text/xml，这个属性会返回一个DOM文档，我们可以使用 DOM的属性和函数，比如getElementById() 和 childNodes 来对它进行处理。

下面有一些参考资料，请参考：

CSS : www.csszengarden.com
             www.meyerweb.com/eric/css/
             www.blooberry.com
早期使用 IFrame 的Ajax异步解决方案相关请参考：
            http://developer.apple.com/internet/webcontent/iframe.html
如果你还不太熟悉JavaScript的交互式用法，请参考：
            www.w3schools.com/js/js_examples_3.asp

Ajax的基础我们已经学完了，欢迎来我的页面做客，我会尽快完成后面的内容的！谢谢大家的来访！