原生AJAX以及AJAX基本封装

AJAX:

XMLHttpRequest是AJAX的基础

1.创建一个XMLHttpRequest对象：

        const xmlhttp;

        if(window.XMLHttpRequest){

          xmlhttp =new XMLHttpRequest();

        }else{

       //针对IE
        xmlhttp = new ActiveXObject(“Microsoft.XMLHttp”）；
         }

2.用XMLHttpRequest向服务器发送请求：

首先查看XMLHttpRequest对象的open()和send()方法

open(method,url,async)
规定请求的类型、URL以及是否异步请求，如果要用AJAX，要设置为异步
method:请求的类型，GET、POST等。
async:true异步、false同步

send(string)
将请求发送到服务器
string:请求的数据，仅用于POST 请求

   //一个发送GET请求并且带请求信息的例子:
   //xmlhttp对象的创建参考上面的例子

   xmlhttp.open("GET","localhost:8080/index.html?a=1&b=2",true);
   xmlhttp.send();

   /*URL中‘？’之后的部分称为querystring,&代表请求参数的分隔符
   上面的例子中发送了{a:1,b:2} */

3.像HTML表单那样POST数据

使用setRequestHeader()添加HTTP头部，然后在send()方法中规定传输的数据:

   xmlhttp.open("POST","localhost:8080/index.htm",true);
   xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   xmlhttp.send("name=bill&age=18");

setRequestHeader(header,value):

向请求添加HTTP头，header规定头的名称，value规定头的值。

4.服务器响应事件:

onreadystatechange事件:

当请求被发送到服务器时，我们需要执行一些基于响应的任务，每当readyState改变时，就会触发onreadystatechange事件，readyState属性存有XMLHttpRequest的状态信息。

XMLHttpRequest对象的重要属性：

XMLHttpRequest对象的属性

readyState与status的具体工作流程：

image.png

status的值可以分为以下几大类：

1xx:信息处理类，表示接收到请求并且继续处理
2xx:处理成功响应类，表示动作被成功接收，理解和接受
3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理
4xx:客户端错误，客户请求包含语法错误或者是不能正确执行
5xx:服务端错误，服务器不能正确执行一个正确的请求

在onreadystatechange事件中，我们规定当服务器已做好被处理的准备时所执行的任务。onreadystatechange事件被触发五次，对应着readyState的每个变化，当readyState等于4且状态status为200时，表示响应已经就绪：

      xmlhttp.onreadystatechange = function (){
          if (xmlhttp.readyState == 0 ){
            console.log('处于定义XHR但未初始化阶段');
          }
         if (xmlhttp.readyState == 1){
            console.log('调用send()方法正在发送请求");     
         }
        if (xmlhttp.readyState == 2){
            console.log('载入完成，已经接受到全部响应内容");
        }
        if (xmlhttp.readyState == 3){
            console.log("正在解析收到的内容");
        }
        if (xmlhttp.readyState == 4){
            console.log("解析完毕可以返回客户端应用");
        }
        if (xmlhttp.readyState ==4 &&xmlhttp.status ==200){
            console.log("响应就绪");
            console.log("响应信息",xmlhttp.responseText);
        }
   }

5.封装XMLHttpRequest

封装模拟jquery的AJAX请求函数，目的是为了减少对jquery的依赖以及提高代码的复用率，使用callback回调函数让onreadystatechange事件执行，使得执行的任务可变:

      //@param:requestobj类似于jquery的ajax请求传入的对象
      //@param:requestobj.method请求的方式，"GET"\"POST"
      //@param:requestobj.url 请求的URL
      //@param:requestobj.data请求的信息
      //@param:requestobj.header 请求的头部信息
      //@param:requestobj.success，onreadystatechange事件的回调

       function ajax( requestobj ){
           requestobj = requestobj || {};
           let method = (requestobj.method == null ?
           "GET" : requestobj.method.toUpperCase());
           let url = requestobj.url || ' ';
           if( url == "" )
           return "url不能为空"
           let data = requestobj.data || null;
           let header = requestobj.header || 'application/x-www-form-unlenconded;charset=utf-8’;
           let callback = requestobj.success;
           let xmlhttp = null;
           if(window.XMLHttpRequest){
                 xmlhttp = new XMLHttpRequest();
           }else{
                xmlhttp = new ActiveObject("Microsoft.XMLHTTP");
           }
          //将对象转化成为querystring形式
          let paramarray = [ ]; 
          for (key in data ) {
              paramarray.push(key+'='+data[key]);
           }
           let datapost = paramarray.join('&‘’);
           xmlhttp.onreadystatechange = function (){
               if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                      callback(xmlhttp.responseText);
              }
              //可以自行添加其他响应，例如status == 404的情况等
          };
     
          if(method == "POST"){
                    xmlhttp.open(method,url,true);
                    xmlhttp.setRequestHeader("Content-Type",header);
                    xmlhttp.send(datapost);
           }else if (method == "GET"){
                     xmlhttp.open(method,url+'?'+datapost,true);
                     xmlhttp.setRequestHeader("Content-Type",header);
                     xmlhttp.send();
           }
}

6.其他XMLHttpRequest方法：

abort()方法：取消当前响应，关闭连接并且结束任何未决的网络活动。
这个方法把XMLHttpRequest对象重置为readyState为0的状态，并且取消所有未决的网络活动，如果响应不再必要时，可以调用这个方法.

getAllResponseHeaders():把HTTP响应头部作为未解析的字符串返回。
如果readyState小于3，这个方法返回null。否则，它返回服务器发送的所有HTTP响应的头部。头部作为单个字符串返回，一行一个头部，每行用换行符“\r\n”隔开。

getResponseHeader()：返回置顶的HTTP响应头部信息，参数是要返回的HTTP响应头部的名称，不区分大小写。
如果没有接受到头部参数或者readyState小于3则为空字符串，如果接受到多个有指定名称的头部，这个头部的值被链接起来并返回，使用都好和空格分隔开各个头部的值。

参考资料：

W3C
AJAX封装
 更全面的AJAX封装