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

【AJAX】XMLHTTPRequest对象

程序员文章站 2022-07-12 18:54:08
...
    在上一篇博客中,我们了解到了AJAX方式下的Web应用程序与传统方式下的Web应用程序有着一个最大的不同之处是:数据传输中不用刷新整个网页,给带来了一种不一样的用户体验。这种技术的核心就是利用的XMLHTTPRequest对象。
    那么,这篇博客就一起来学习XMLHTTPRequest对象。
    一.什么是XMLHTTPRequest。
    中文可以解释为可扩展超文本传输请求。Xml可扩展标记语言,Http超文本传输协议,Request请求。
    XMLHttpRequest 对象用于在后台与服务器交换数据。
    XMLHttpRequest 对象是开发者的梦想,因为您能够:在不重新加载页面的情况下更新网页;在页面已加载后从服务器请求数据;在页面已加载后从服务器接收数据;在后台向服务器发送数据。
    所有现代的浏览器都支持 XMLHttpRequest 对象。
    二.XMLHTTPRequest对象的属性。
    
属性 描述 详细说明
readyState HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时,这个属性的值从 0 开始,直到接收到完整的 HTTP 响应,这个值增加到 4。 0-Uninitialized-初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1-Open-open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。
2-Send-Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。
3-Receiving-所有响应头部都已经接收到。响应体开始接收但未完成。
4-Loaded-HTTP 响应已经完全接收。
responseText
目前为止从服务器接收到的响应体(不包括头部),或者如果还没有接收到数据的话,就是空字符串。
如果 readyState 小于 3,这个属性就是一个空字符串。当 readyState 为 3,这个属性返回目前已经接收的响应部分。如果 readyState 为 4,这个属性保存了完整的响应体。
responseXML
对请求的响应,解析为 XML 并作为 Document 对象返回。如果响应体不是“text/xml”返回null。

status
由服务器返回的 HTTP 状态代码
如 200 表示成功,而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。
statusText
这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。
当状态为 200 的时候它是 "OK",当状态为 404 的时候它是 "Not Found"。和 status 属性一样,当 readyState 小于 3 的时候读取这一属性会导致一个异常。
    三.XMLHTTPRequest对象的方法
    
方法 描述 详细说明
open(string method,string url,boolean asynch,
String username,string password)
初始化 HTTP 请求参数,例如 URL 和 HTTP 方法,但是并不发送请求。
Method:表示http请求方法,一般使用"GET","POST".
url:表示请求的服务器的地址;
asynch:表示是否采用异步方法,true为异步,false为同步;
后边两个可以不指定,username和password分别表示用户名和密码,提供http认证机制需要的用户名和密码。
send(content) 发送 HTTP 请求,使用传递给 open() 方法的参数,以及传递给该方法的可选请求体。
content可以指定为null表示不发送数据,其内容可以是DOM对象,输入流或字符串。
setRequestHeader(String header,String Value) 向一个打开但未发送的请求设置或添加一个 HTTP 请求。 此方法需在open方法以后调用,一般在post方式中使用。
getResponseHeader(String header)

返回指定的 HTTP 响应头部的值。
其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字,不区分大小写。
该方法的返回值是指定的 HTTP 响应头部的值
如果没有接收到头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部,这个头部的值被连接起来并返回,使用逗号和空格分隔开各个头部的值。
Abort()
停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。
把 XMLHttpRequest 对象重置为 readyState 为 0 的状态,并且取消所有未决的网络活动。例如,如果请求用了太长时间,而且响应不再必要的时候,可以调用这个方法。
getAllResponseHeaders()
 
把 HTTP 响应头部作为未解析的字符串返回。
如果 readyState 小于 3,这个方法返回 null。否则,它返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回,一行一个头部。每行用换行符 "" 隔开。
    四.XMLHTTPRequest对象五步使用法
    对于XMLHTTPRequest对象已有了一个理论认识,下面就介绍如何使用它的经典五步法。
    第一步:创建XMLHTTPRequest对象  
 var xmlhttprequest; 
   if(window.XMLHttpRequest){ 
       xmlhttprequest=new XMLHttpRequest(); 
       if(xmlhttprequest.overrideMimeType){ 
           xmlhttprequest.overrideMimeType("text/xml"); 
       } 
   }else if(window.ActiveXObject){ 
       var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; 
       for(var i=0;i<activeName.length;i++){ 
           try{ 
               xmlhttprequest=new ActiveXObject(activeName[i]); 
               break; 
           }catch(e){ 
 
           } 
       } 
   } 
 
   if(xmlhttprequest==undefined || xmlhttprequest==null){ 
       alert("XMLHttpRequest对象创建失败!!"); 
   }else{ 
       this.xmlhttp=xmlhttprequest; 
   } 
    第二步:注册回调方法    
//2.注册回调方法 
     xmlhttp.onreadystatechange=callback; 
    //错误的写法callback();  
    第三步:设置和服务器交互的相应参数 
 /*
    //GET方式交互 
    //设置和服务器端交互的相应参数 
    xmlhttp.open("GET","AjaxServer?name="+userName,true); 
    */
    /*
    //POST方式交互
    //设置和服务器端交互的相应参数 
    xmlhttp.open("POST","AjaxServer",true); 
    //POST方式交互所需要增加的代码 
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
    */ 
    第四步: 设置向服务器端发送的数据,启动和服务器端的交互  
//4.设置向服务器端发送的数据,启动和服务器端的交互 
    //GET方式
    xmlhttp.send(null);
    //POST方式
    //4.设置向服务器端发送的数据,启动和服务器端的交互 
    xmlhttp.send("name="+userName);   
    第五步:判断和服务器端的交互是否完成,还要判断服务器端是否返回正确的数据  
//根基实际条件写callback的功能代码 
function callback(){ 
     if(xmlhttp.readState==4){ 
         //表示服务器的相应代码是200;正确返回了数据  
        if(xmlhttp.status==200){  
            //纯文本数据的接受方法  
            var message=xmlhttp.responseText;  
            //使用的前提是,服务器端需要设置content-type为text/xml  
            //var domXml=xmlhttp.responseXML;  
            //其它代码 
         }  
    } 
 } 
    五.学习总结
    以上是对XMLHTTPRequest对象基础的总结,初次接触,没有什么很深刻的体会,而对于后面了解到的内容,使用它会有一些扩展性的问题,如:“缓存问题”、“中文问题”以及“跨域问题”,也觉得应该是后面在项目实践中都要考虑的方面。并且,在以后的开发中,为了更好的用户体验,也是一定会用到AJAX这一技术,而上面的五步法也就是用到它时必不可少的一块代码,期待以后见证它的使用时刻~