ajax 的基础原理 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

來源：简书