欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Ajax和XMLHttpRequest对象

程序员文章站 2022-07-12 18:57:44
...

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元素中。

上一篇: ajax请求

下一篇: 第13章、事件