您的位置：首页 > Web前端 > JavaScript

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

2017-09-13 13:59 447 查看

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里面。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航