JavaScript DOM 编程艺术(第二版)7.4 Ajax

来源：互联网发布：java 定义object数组编辑：程序博客网时间：2024/06/05 07:21

Ajax技术的核心就是XMLHttpRequset。这个对象充当着浏览器中的脚本（客户端）与服务器之间的中间人的角色。JavaScript通过这个对象可以自己发送请求，同时自己也响应处理。以下为Ajax的代码示例：

在这之前，先在scripts目录下保存一个addLoadEvent函数：

function addLoadEvent(func){var oldonload = window.onload;if(typeof window.onload != 'function'){window.onload = func;}else{window.onload = function(){oldonload();func();}}}

把以下代码保存为ajax.html：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/><title>Ajax</title></head><body><div id="new"></div><script src="scripts/addLoadEvent.js"></script><script src="scripts/getHTTPObject.js"></script><script src="scripts/getNewContent.js"></script></body></html>

再在ajax.html文件同目录下创建example.txt文件，内容如下：

This was loaded asynchronously!

然而，不同的IE版本中使用的XMLHTTP对象也不相同。为了兼容所有的浏览器，getHTTPObject.js文件中的getHTTPObject函数要这样来写：

并把该文件置于scripts文件目录下。

function getHTTPObject(){if(typeof XMLHttpRequest == "undefined")XMLHttpRequest = function(){try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}catch(e) {}try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}catch(e) {}try{return new ActiveXObject("Msxml2.XMLHTTP");}catch(e) {}return false;}return new XMLHttpRequest();}

getHTTPObject通过对象检测技术检测到了XMLHttpRequest。如果失败，继续检测其他方法，最终返回false或者一个新的XMLHttpRequest对象。

XMLHttpRequest对象有许多方法。其中最有用的就是open方法，它用来指定服务器上将要访问的文件，指定请求类型：GET,POST或SEND。这个方法的第三个参数用于指定请求是否以异步方式发送和处理。

在getNewContent.js文件中添加下列代码：

function getNewContent(){var requset = getHTTPObject();if(requset){requset.open("GET","example.txt",true);requset.onreadystatechange = function(){//如果其他脚本依赖于服务器的响应，那么就得把相应的代码都转移到指定给onreadystatechange属性的那个函数中if(requset.readyState == 4){// alert("Response Received");var para = document.createElement("p");var txt = document.createTextNode(requset.responseText);para.appendChild(txt);document.getElementById("new").appendChild(para);}};requset.send(null);}else{alert("Sorry, your browser doesn\'t support XMLHttpRequest");}// alert("Function Done");}addLoadEvent(getNewContent);

当页面加载完成后，以上代码会发出GET请求，请求与ajax.html文件位于同一个目录下的example.txt文件。

onreadystatechange是一个事件处理函数，他会在服务器给XMLHTTPRequest对象送回响应的时候被触发；根据服务器具体的响应来做相应的处理，比如获取服务器返回的相关文本，并创建一些文档元素；

readyState属性值有5种0~4，分别表示：未初始化，正在加载，加载完毕，正在交互，。完成；

在这个例子中，onreadgstatechange事件处理函数在等到readyState值变为4之后，就会从responText属性中取得文本数据，然后放到一个段落中，再将新段落添加到DOM里面。

阅读全文

1 0