【DOM编程艺术】XMLHttpRequest对象

ゞ浴缸里的玫瑰 2022-01-06 06:21 227阅读 0赞

Ajax技术的核心就是XMLHttpRequest对象。这个对象充当着浏览器脚本（客户端）与服务器之间的中间人的角色。

以往的请求都由浏览器发出，而Javascript通过这个对象可以自己发送请求，同时也自己处理响应。

不同浏览器实现XMLHttpRequest对象的方式不太一样。为了保证跨浏览器，你不得不为同样的事情写不同的代码分支。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ajax</title>
    </head>
    
    <body>
    <div id='new'></div>
    <script>
    getNewContent();
    function getHTTPObject(){
        if(typeof XMLHttpRequest == 'undefined'){        
           try{ return new ActiveXObject('Msxml2.XMLHTTP.6.0');}
           catch(e){}
           try{ return new ActiveXObject('Msxml2.XMLHTTP.3.0');}
           catch(e){}
           try{ return new ActiveXObject('Mxml2.XMLHTTP');}
           catch(e){}
           return false;   
        }else{
            return new XMLHttpRequest();    
        }
    }
    function getNewContent(){
        var request=getHTTPObject();  //在ie7、ie8下由于XMLHTTPObject安全方面的考虑，会提示拒绝访问的错误，ie7、ie8下如果使用ActiveXObject('……')则会显示内容        chrome中也有错误
        if(request){
            request.open('GET','example.txt',true);
            request.onreadystatechange=function(){
                if(request.readyState==4){
         
    　　　　　　　　　alert('Response Recived');
                    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 doesn\'t support XMLHttpRequest');
        }
    　　alert('测试什么叫异步加载');  //很可能alert('测试……')的警告框会先于alert('Response Recived')的警告框。
    }
    </script>
    </body>
    </html>

页面上输出了This was loaded asynchronously! (这是example.txt的内容)

example.txt内容

This was loaded asynchronously!

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

2.onreadystatechange是一个事件处理函数，它会在服务器给XMLHttpRequest对象送回响应的时候被触发执行。request.onreadystatechange=function()\{ \}

3.在指定了请求的目标，也明确了如何处理响应之后，就可以用send方法来发送请求了。request.send(null);

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

■ 0表示未初始化 ■1表示正在加载 ■2表示加载完毕 ■3表示正在交互 ■4表示完成

访问服务器发送回来的数据要通过两个属性完成。一个是responseText属性，这个属性用于保存文本字符串形式的数据。

另一个是responseXML属性，用于保存Content-Type头部中指定为text/xml的数据

其实是一个DocumentFragment对象。（你可使用各种DOM方法来处理这个对象）

而这也正是XMLHttpRequest这个名称里有XML的原因。