Ajax和XMLHttpRequest对象

最新推荐文章于 2022-04-10 00:02:42 发布

FLQ77

最新推荐文章于 2022-04-10 00:02:42 发布

阅读量410

点赞数

分类专栏：学习笔记----JS 文章标签： ajax javascript xmlhttprequest

学习笔记----JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Ajax

Ajax是指异步加载页面内容的技术。

XMLHttpRequest对象

Ajax技术的核心就是XMLHttpRequest对象。这个对象充当着浏览器中的脚本（客户端）与服务器之间的中间人的角色。以往的请求都由浏览器发出，而JavaScript通过这个对象可以自己发送请求，同时也自己处理响应。
有一个问题是不同的浏览器实现XMLHttpRequest对象的方式不太一样。为了保证跨浏览器，你不得不为同样的事情写不同的代码分支。
举个栗子，把以下代码保存为html文件夹中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>

这个HTML文件中包含的三个JS文件位于scripts文件中。为了模拟服务器的响应，在ajax.html文件旁边创建一个example.txt文件，包含如下内容：
This was loaded asynchronnously.
这个文件将充当服务器脚本的输出。多数情况下，服务器端脚本在接到请求后，还会做出一番处理再输出结果。但这里我们只是为了演示说明，就简单一点。接下来我们来编写三个JS脚本。
addLoadEvent.js文档代码如下：

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

接下来是getHTTPObject.js和getNewContent.js这两个脚本。
微软最早在IE5中以Active对象的形式实现了一个名叫XMLHTTP的对象。在IE中创建新的对象要使用下列代码：

var request=new ActiveXobject("Msxml2.XMLHTTP.3.0");

其他浏览器则基于XMLHttpRequest来创建对象：

var request=new XMLHttpRequest();

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

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,即原生XHR对象是否存在，如果存在则返回它的新实例。如果不存在则继续检测ActiveX对象，最终返回一个新的XMLHTTP对象或false.
这样你在其他脚本中要使用XMLHttpRequest对象时，可以将这个新对象直接赋值给一个变量：

var request=getHTTPObject();

XMLHttpRequest对象有很多方法。其中最有用的是open方法，它用来指定服务器上将要访问的文件，指定请求类型：GET、POST或SEND。这个方法的参数用于指定请求是否以异步方式发送和处理。
在getNewContent.js文件中添加下列代码：

function getNewContent() {
    var request=getHTTPObject();
    if(request){
        request.open("GET","example.txt",true);
        request.onreadystatechange=function(){
            if(request.readyState==4){
                var para=document.createElement("p");
                var txt=document.createTextNode(request.responseText);
                para.appendChild(txt);
                document.getElementById('new').appendChild(para);
            }
        };
        request.send(null);
    }else{
        alert('Sorry,your browser doesnt support XMLHttpRequest');
    }
}
addLoadEvent(getNewContent);

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

request.open("GET"，"example.txt",true);

open方法的三个参数：要发送的请求的类型（“get”、”post”等）、请求的URL和表示是否异步发送请求的布尔值。

代码中的onreadystatechange是一个事件处理函数，它会在服务器给XMLHttpRequest对象送回响应的时候触发执行。
在此，我们给它指定一个处理函数：

request.onreadystatechange=function(){
   //处理响应
   };

在指定了请求的目标，也明确了如何处理响应之后，就可以用send方法来发送请求了：

requset.send(null);

服务器在向CMLHttpRequset对象发送响应时，该对象有许多属性可用，浏览器会在不同阶段更新readyState属性的值，它有5个可能的值：

0表示未初始化
1表示正在加载
2表示加载完毕
3表示正在交互
4表示完成
只要readyState属性的值变成了4，就可以访问服务器发送回来的数据了。
在这个例子中，onreadyStatechang事件处理函数在等到readyState值变成4之后，就会从responseText属性里取得文本数据，然后把数据放在一个段落里，再将新的段落添加到DOM里:
request.onreadystatechange=function(){
if(request.readyState==4){
var para=document.createElement(“p”);
var txt=document.createTextNode(request.responseText);
para.appendChild(txt);
document.getElementById(‘new’).appendChild(para);
}
};
此时，example.txt文件中的文本内容就会出现在id为new的div元素中。