前后端交互---如何发起ajax-原创手记-慕课网

在低版本的IE7及以下的浏览器使用ActiveXObject构造Ajax对象时需要传入一个String类型的Microsoft.XMLHTTP。

//for IE7-
var xmlHttp1 = new ActiveXObject("Microsoft.XMLHTTP");
var xmlHttp2 = new ActiveXObject("Msxml2.XMLHTTP");
var xmlHttp3 = new ActiveXObject("Msxml3.XMLHTTP");

在标准的浏览器中使用XMLHttpRequest对象

//for IE8+  ，Firefox，chrome,Opera ,Safari
var xmlHttp = new XMLHttpRequest( );

为了兼容低版本的浏览器为此需要做一个判断

<script type="text/javascript">
var XHR = function () {

       var XMLHttp;

       if ( window.XMLHttpRequest ) {

        XMLHttp =  new XMLHttpRequest();

        }else{

        XMLHttp  = new ActiveXObject("Microsoft.XMLHTTP");
        }

       return XMLHttp;
}

var XMLObj = XHR();

console.log(XMLObj);
</script>

函数优化：我们可以用惰性函数来判断，在第二次执行的时候就能快速找到Ajax对象;

<script type="text/javascript">
var XHR = function (){

     var AJAXObj = [
        function () { return new  XMLHttpRequest() },

        function () { return new  ActiveXObject("Microsoft.XMLHTTP") },

        function () { return new  ActiveXObject( "Msxml2.XMLHTTP") },

        function () { return new  ActiveXObject("Msxml3.XMLHTTP") },
        ];

        var val = null ;

         for ( var i = 0; i < AJAXObj.length; i++ ) {

                 try {

                      val  =  AJAXObj[i]() ; 

                    } catch (e) {

                       continue;

                     }
                  XHR = AJAXObj[i];

                  break;
          };
       if(!val){

         throw new ReferenceError ("XMLHttpRequest is not supported"); 
         }
         return val;
}
var  XMLObj = XHR( );

console.log(XMLObj);
</script>

接下来如何使用XMLHttpRequest或者ActiveXObject

XMLHttpRequest()是一个JavaScript对象，他可以取回url上的资源数据 ,而且XMLHttpRequest 可以取回所有类型的数据资源,并不局限于XML. 而且除了HTTP ,它还支持file 和 ftp 协议.
XMLHttpRequest让发送一个http的请求变的非常容易，只需简单的创建一个请求对象那个实例

var XHR = new XMLHttpRequest();

打开一个url，然后发送这个请求
,当传输完毕后，结构的http状态以及返回的相应内容也可以从请求对象中获取。

一,XMLHttpRequest对象方法概述:

//  返回值             方法(参数)
 1, void               abort();中止操作;
 2,DOMString           getAllResponseHeaders();得到所有响应头
 3,DOMString           getReponseHeader(DOMString header);得到指定的响应头
 4, void               open(DOMString method, DOMString  url, optional  async , optional DOMString ? user ,optional DOMString? +password);开启XMLHTTPRequest对象;
 5, void               send();发送请求;
 7, void               send(ArrayBuffer data);发送二进制流
 8, void               send(Blob data);发送二进制块
 9, void               send(Document data);发送文档
10, void               send(DOMString? data);发送字符串
11, void               send(FormData data);发送格式化表单数据
12, void               setRequestHeader(DOMString header, DOMString value);//设置请求头

<script type="text/javascript">

var XHR = new XMLHttpRequest();

XHR.getAllResponseHeaders();
var  allheaders  = XHR.getAllResponseHeaders();//返回所有的响应头信息,如果响应头不存在，则返回null

XHR.getAllResponseHeader();
var dateheader = XHR.getAllResponseHeader("date");//返回指定的响应头的值,如果响应头还没被接受,或该响应头不存在,则返回null.

XHR.open()
XHR.open(http Method, URL, isAsync, userName, password);
//http Method请求所使用的http方法“POST”，“GET”
//URL 该请求所要访问的URL
//isAsync 一个可选的布尔参数，默认为真，指示是否异步执行操作。如果该值为false时，send()方法不返回直到收到响应。如果为true，完成交易的通知使用事件侦听器提供。这必须是真实的，如果多部分属性为true，或将引发异常。
//userName 可选的用户名，以用于身份验证的目的;默认情况下，这是一个空字符串。
//password 可选的密码用于认证的目的;默认情况下，这是一个空字符串。

XHR.onload
XHR.onload = function ( ) {
console.log(this.responseText, this.responseType, this.response);
}
//当XMLHTTPRequest对象加载完成时(readyState为4)触发，且只与readyState有关，与status和statustext无关；
//所以当注册onload的方法执行时不一定为成功的状态。只是也仅仅是这个条http事务完成而已。不注册此方法则onload默认为null。

XHR.onreadystatechange
XHR.onreadystatechange = function () {
//判断ajax请求成功
   if ( this.readyState == this.DONE && this.statusText == "OK" ){
     console.log(this.response,"成功");
    } 
//或者
   if(this.readyState == 4 this.status == 200 ) {
     console.log(this.responseText,"成功");
     }
}
//每当readyState的值改变时就会触发该方法，不注册此方法则onreadystatechange默认为null。

send();//注意:  所有的事件绑定必须在send()方法之前进行
XHR.send(undefined||null||ArrayBufferView||Blob||XML||String||FormData);
//发送请求: 如果请求是异步模式(默认)，该方法会立刻返回,相反，如果请求是同步模式，则直到请求的响应完全接受以后,该方法才会返回.
//GET请求没有主体，所以默认传递为null或者省略这个参数。POST请求通常拥有主体，同时它应该匹配setRequestHeader()指定的Content-Type头;

XHR.setRequestHeader("header","value");
//设置指定的请求头，此方法必须在send()执行之前执行;
//header 将要被赋值的请求头名称
//value 给指定的请求头赋值
</script>

二，XMLHttpRequest对象属性概述:

//        属性名       格式类型            说明
onreadystatechange    Function           一个js函数对象,当readyState属性改变时会调用它，回调函数会在用户节后线程中调用.(警告: 不能在本地代码中使用. 也不应该在同步模式的请求中使用.)
readyState            unsigned           0：UNSENT未打开open()方法还未调用, 1:opened(未发送)send方法还未被调用,  2： HEADERS_RECEIVED(响应头已经获取) send()方法已经被调用，响应头和响应状态已经返回, 3:   _LOADING(正在下载响应体)响应体正在下载中,responseText中已经获取了部分数据 ; 4：DONE(请求完成)整个请求过程完毕;  
response              varies             响应实体的类型由 responseType 来指定， 可以是 ArrayBuffer， Blob， Document， JavaScript 对象 (即 "json")， 或者是字符串。如果请求未完成或失败，则该值为 null。
responseText          DOMString          此次请求的响应为文本，或是当请求未成功或还未发送时为 null。只读。
responseType   XMLHttpRequestResponseType设置该值能够改变响应类型。就是告诉服务器你期望的响应格式： "" (空字符串) 字符串(默认值)、 "ArrayBufferView" ArrayBufferView、 "blob" Blob、 "document" Document、 "json" JavaScript Object、 "text" 字符串。
responseXML           Document?          本次请求的响应是一个 Document 对象，如果是以下情况则值为 null：请求未成功，请求未发送，或响应无法被解析成 XML 或 HTML。当响应为text/xml 流时会被解析。当 responseType 设置为"document"，并且请求为异步的，则响应会被当做 text/html 流来解析。只读.(注意: 如果服务器不支持 text/xml Content-Type 头，你可以使用 overrideMimeType() 强制 XMLHttpRequest 将响应解析为 XML。)
status                unsigned short     该请求的响应状态码 (例如, 状态码200 表示一个成功的请求).只读.
statusText            DOMString          该请求的响应状态信息,包含一个状态码和原因短语 (例如 "200 OK"). 只读.
upload           XMLHttpRequestUpload    可以在 upload 上添加一个事件监听来跟踪上传过程。
withCredentials       boolean            表明在进行跨站(cross-site)的访问控制(Access-Control)请求时，是否使用认证信息(例如cookie或授权的header)。 默认为 false。注意: 这不会影响同站(same-site)请求.

HTTP请求的各部分的指定顺序
首先请求方法和URL首先到达，然后是请求头 ,最后是请求主体。XMLHttpRequest实现通常直到调用send()方法才开始启动网络。
setRequestHeader()方法的调用必须在调用send()之前但在open()之后，否则抛出异常.

var XHR = new XMLHttpRequest();

XHR.open("POST/GET",URL);

XHR.setRequestHeader("Content-Type","text/plain;charset=UTF-8");

XHR.onreadystatechange = function () {

  if(XHR.readyState  == 4 &&  XHR.status == 200){

     console.log(XHR.responseText,XHR.response,XHR.responseType);

     } 

 };
XHR.send();
//如果是open()为GET，那么send()里的参数为空或者null;
//如果是open()为POST,那么send()里有参数，还需要配合XHR.setRequestHeader()一起使用;

var XHR = new XMLHttpRequest();

XHR.open("GET","index.xml");

XHR.onreadystatechange = function () {

       if (this.readyState == 4 && this.status  == 200){

            if ( this.responseXML != null && this.repsonseXML.getElementById("test".textContent) ) {

                     processData(this.responseXML.getElementById("test").textContent);

                     return;

                }else{

                     processData(null);

                   }
        }
};
XHR.send();
//一个处理请求过来的XML文档函数;
function processData(data){

}

//如果你只想一个记录消息服务器
function log (message) {

 var XHR = new XMLHttpRequest();

XHR..open("POST","url");

XHR.setRequestHeader("Content-Type","text/plain;charset=UTF-8");

XHR.send(message);
}

//或者，如果你要检查服务器上的文档的状态
function fetchStatus (address) {

       var  XHR = new XMLHttpRequest();

       XHR.onreadystatechange = function () {

           if(this.readstate  == this.DONE) {

                 return this.status;
            }
        }
       XHR.open("HEAD",address);

       XHR.send();
}