ajax 的基础原理

今天阿里巴巴的技术电话面试官跟我面试打击很大啊！自己的基础太差了，从今天起要开始复习前端基础知识希望可以成为一名过得去的前端工程师。

ajax 英文全称 Asynchronous JavaScript and XML ， 也就是异步的 javascript 和 xml。

可以这么说 ajax 给了web 新的生命力，如果没有ajax，web的体验是非常的差的，以前我们知道是桌面软件的时代，现在是互联网的时代，未来计算机可能就安装一个浏览器就行了，不用安装客户端，通过接口和服务器通讯实现操作的目的，ajax起了很大的作用，如果像以前的form表单提交那样的通讯体验多差，所以ajax技术给了javascript 新的生命。当然现在html5 里面新的websocket 也是很牛逼的一个存在，微信网页版的就是使用这个技术牛逼的很。

重点 ：ajax原理和XmlHttpRequest对象（官网上找）

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。

XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

所以我们先从XMLHttpRequest讲起，来看看它的工作原理。
　首先，我们先来看看XMLHttpRequest这个对象的属性。
　　它的属性有：
　　- onreadystatechange 每次状态改变所触发事件的事件处理程序。
　　- responseText 从服务器进程返回数据的字符串形式。
　　- responseXML 从服务器进程返回的DOM兼容的文档数据对象。
　　- status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
　　- status Text 伴随状态码的字符串信息
　　- readyState 对象状态值

      0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
      1 (初始化) 对象已建立，尚未调用send方法
      2 (发送数据) send方法已调用，但是当前的状态及http头未知　　
      3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，　　
      4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

这是我多年前封装的ajax函数

function ajax(obj)
{
    var parameter={    //参数的对象。
        url:obj.url,   //地址
        success:obj.success,  //传回来的函数
        method:obj.method || "get",  //方式
        name:obj.data || null,      //传进的数据
        bool:obj.bool|| true,      // boolean值同步异步
        type:obj.type || "",       //数据类型
        fail:obj.fail || function(){}   //失败的函数
    }
    var ajax=new XMLHttpRequest();   //声明这个函数
    if(parameter.method=="get"){    //get方法的传输数据
        if(parameter.name){
            parameter.url+="?"+encodeURI(parameter.data);//传送数据的时候
        }
        ajax.open("get",parameter.url,parameter.bool);  //地址传输
        ajax.send();     //发送
    }else if(parameter.method=="post"){   //这是post方法
        ajax.open("post",parameter.url,parameter.bool);
        ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');  //传输数据的时候有个请求头的存在。
        ajax.send(parameter.data);   //传输数据
    }
    ajax.onload?ajax.onload=fn:ajax.onreadystatechange=fn;   //ie浏览器跟fireFox第一个函数
    function fn(){
        if(ajax.readyState==4){         //状态码
            if(200<=ajax.status&&ajax.status<=207){
                var str=(parameter.type=="xml")?ajax.responseXML:((parameter.type=="json")?(new Function("","return"+ajax.responseText))():ajax.responseText);     //判断数据类型
                parameter.success&&parameter.success(str);
            }else{         //   出错
                parameter.fail&&parameter.fail(ajax.status);
            }
        }
    }
}
// 特别注意的是obj.data数据是name=name&data&data而不是json格式的数据。

当然这个是最简陋的一个ajax的封装了，在实际的项目中只能说勉强可用吧！
像类似jquery和axios 那么强大还是要进一步来封装。

函数完善：

// header 部分的补充（可以按照自己的需求来完成）
ajax.setRequestHeader()  //  设置请求头信息
ajax.getRequestHeader() //   获得请求头信息
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // 标准的表单格式
ajax.setRequestHeader('Content-Type','Content-type: application/json; charset=utf-8');  // 最常使用的json 格式

// 中断请求
XMLHttpRequest 方法有 ajax.abort() 方法来中断跟服务器的请求，实际上也是中断服务器连接，可能服务器已经工作了。

三、XMLHttpRequest对象的属性

XMLHttpRequest对象的属性有哪些？有些什么用？

属性名
作用

readyState
只读属性，用于表示XMLHttpRequest请求的当前状态，有五个数字(0,1,2,3,4);0：表示已经创建了XMLHttpRequest对象，但是open方法还未被调用；1：表示已调用open方法，但还未调用send方法（请求还未被发送出去），此时可以对请求的header进行设定（setRequestHeader方法）；2：send方法已调用，数据已发送，并且服务器接收到了请求；3：表示服务器正在传输数据；4：数据传输完成；该方法一般在onreadystatechange事件中进行查看

status
只读属性，表示本次请求的状态，只返回一个数字，常用的有如下几个状态码：200：OK（正常访问）；301：Moved Permanently（永久移动）；302：Moved temporarily（暂时移动）；304：Not Modified（未修改）；307：Temporary Redirect（暂时重定向）；401：Unauthorized （未授权）；403：Forbidden（禁止访问）；404：Not Found（未找到该网址）；500：Internal Server Error （找到网址但服务器发生错误）；

statusText
与status属性类似，返回本次请求的状态，不同点在于，status只返回一个数字，而该属性返回数字和状态解析

responseType
可通过对该属性赋值来指定接收的数据类型，默认为字符串，有如下几种数据类型：text：以字符串形式接收数据；json：以json对象形式接收数据；blob：blob对象；ArrayBuffer：ArrayBuffer对象；

responseresponseTextresponseXML
三者都是服务器返回的数据，如果数据不完整或者获取失败，它们的值就为null；不同点：response返回的是数据的主体部分，可以为任何类型(数组，json，XML，字符串等)；responseText返回从服务器接收到的字符串；responseXML返回从服务器接收到的Document对象，若返回的数据不能解析为XML或者HTML格式，那该属性的值为null，该值返回的数据会被直接解析DOM；

timeout
该属性用以设置发送请求后多少毫秒后未接到回应就自动终止请求，0为无时间限制，默认值为0，可通过在open方法后send方法前对其进行赋值来制定

withCredentials
该属性制定跨域请求时，个人的cookie信息是否附带进请求herder中，默认为false（不携带cookie），可通过对其进行赋值来制定

四、XMLHttpRequest对象的方法

方法名
作用

open
类比：拨打电话时的拨号行为，确定拨打（连接）的目标；open方法用以设置请求的参数，常用的有三个参数：第一个参数：请求的类型（常用get或者post）；第二个参数是接口名和：这里要分两种情况：get请求时：接口名+请求参数（键值对形式）；post请求时：只需要接口名；第三个参数：一个布尔值，指定是否异步（true为异步，false为同步，通常为true，默认为true）；第四和第五个参数：填写用于认证的用户名和密码；

send
类比：拨打电话时，填写好电话号码后按拨打键（发送请求）；send方法用以发送HTTP请求，需要在open方法调用后调用；参数分两种形式：get：get请求时无参数；post：post请求时参数为请求参数（键值对形式）

setRequestHeader
类比：填好电话号码后，想好是用人工接听还是机器人接听，再拨打电话（这个比喻不是很恰当）；setRequestHeader方法用以设置请求的header部分，用以指定数据发送的格式，调用必须在open方法后，send方法前；常用实例：setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

abort
类比：拨打电话后把电话给挂了；abort方法用以中断已经发出的AJAX请求；可以用这个方法来防止用户重复点击造成的发送重复请求的问题；

getResponseHeader和getAllResponseHeaders

类比：打印我的通话清单（getResponseHeader为通话清单的指定信息，getAllResponseHeaders为通话清单的所有信息）；getResponseHeader和getAllResponseHeaders之间的不同点：getResponseHeader接收一个参数，该参数为需要返回的回应头部信息；getAllResponseHeader无需参数，返回所有的回应头信息；

overrideMimeType
用以将从服务器转换回来的二进制信息转换为文本信息，该方法已被responseText属性代替

五、XMLHttpRequest对象的事件以及对应的事件监听接口

事件名
接口名
作用

readyStateChange（请求状态改变事件）
onreadystatechange
当readyState属性的值发生变化时，就会触发readyStateChange，可以对onreadystatechange指定函数来监控readyState的值；注：通常来说，一次交互中，readyState的值会发生五次变化，也就是说会触发五次readyStateChange事件

abort（请求被中断事件）
onabort
通过onabort事件接口，可指定当请求被中断时的具体措施

error（请求发生错误事件）
onerror
通过onerror事件接口，可指定当请求出错时的具体措施

load（请求完成，数据传输完毕事件）
onload
通过onload事件接口，可指定当数据传输完毕的具体措施

loadend（请求已完成事件）
onloaded
abort、error和load这三个事件的触发都会另外触发loadend事件，表示请求已完成，但成功与否未知

对应属性timeout
ontimeout
可通过ontimeout接口指定当用户请求超时的措施

progress（文件上传事件）
onprogress
可通过对onprogress接口指定措施来监控文件上传的进度

参考文献：
作者：大春春
链接：https://www.jianshu.com/p/94c12c6bfbe6
來源：简书