AJAX的实现基础及Jquery的ajax的原生js代码

AJAX的实现基础是XMLHTTPRequest对象。（使用浏览器可以发出http请求和接收http响应）

所以下面先来了解XMLHTTPRequest。

W3C提出了XMLHttpRequest标准，分为Level 1和Level 2。
Level 1主要存在以下缺点：

• 受同源策略的限制，不能发送跨域请求；
• 不能发送二进制文件（如图片、视频、音频等），只能发送纯文本数据；
• 在发送和获取数据的过程中，无法实时获取进度信息，只能判断是否完成；

Level 2中新增了以下功能：

• 可以发送跨域请求，在服务端允许的情况下；
• 支持发送和接收二进制数据；
• 新增formData对象，支持发送表单数据；
• 发送和获取数据时，可以获取进度信息；
• 可以设置请求的超时时间；

这个对象如何使用？

一个ajax请求的流程：发送请求+接收响应=1.发送之前+2.发送请求+3.收到响应+4.收到之后。

1.发送之前

创建XMLHTTPRequest对象

var xhr=new XMLHttpRequest();//这里会存在浏览器的兼容性差异的

设置xhr的参数（如timeout，responseType）

2.发送请求

xhr.open();//一定要先open了在send，就好比水龙头必须先开了开关才有水流
xhr.send(data);

3.收到响应和4.收到之后结合起来说

其实就是那个回调函数，就是根据收到不同的响应来根据业务回调相应的函数。

接着这里就要深入了解xhr的相关事件（共8个），这里就直接放链接了

https://blog.youkuaiyun.com/summer_savetime/article/details/52118152

其实基本上网上一搜详细的知识讲解都有的。这里主要是自己过一遍对这个知识点的理解。

简言之，ajax的实现基础就是XMLHTTPRequest对象。

通过原生js实现ajax方法，就可以对ajax有进一步的理解。

这里简单说实现思路：

function ajax(){
    var ajaxData={
        //在这个对象里就是ajax的参数设置以及传参
    }
    //通过上面提到的请求流程，调用XMLHTTPRequest对象的方法，并把ajaxData对应的数据传进去
}

具体代码

以上内容为个人总结，仅供参考，如有侵权联系编者删除内容