今日要闻$.ajax,axios,fetch,原生XHR四种ajax区别

在前端开发时，离不开前后端数据交互，通过后端接口取数据，A是常用的一门与W服务器通信的技术，目前发送A请求的主要有4种方式：


原生XHR

中的$()







原生XMLHR

代码例
原生AJAXAPI中核心提供的是一个XMLHR类型，所有的AJAX操作都需要使用到这个类型。

=XMLHR();创建XMLHR对象是异步的，设置回调函数=(){状态发生变化时，函数被回调
(S===4){成功完成
判断响应状态码
(===200){
成功，通过T拿到响应的文本:
(T);
}{
失败，根据响应码判断失败原因:
();
}
}{
HTTP请求还在继续
}}发送请求:('GET','');RH("C-T","")设置请求头();到这一步，请求才正式发出


使用原生的还是比较繁琐，际工程中建议使用Q之类的库，封装的请求方法非常好用，且解决了浏览器兼容性的问题。


J

代码示例
$({
:"GET",
:,
:,
T:T:(){},
:(){}})


以上代码，是J对原生XHR的封装，另外还增加了的支持，让请求可以支持跨域请求，需要注意的是：请求本质不是XHR异步请求，只是请求了一个文件，因此在浏览器的面板中的标签下看不到的跨域请求，但是在标签下能看见。


请求示例
!DOCTYPE=""
       
                ="UTF-8"
                使用Q-AJAX--读取获得跨域JSONP数据
                ="-172"=""
                =""
,{
        -:"MY";
}
{
        -:;
}
               
       
       
                2
=":(0)"="AJAX"点击AJAX获取数据JSONP跨域
                2
                =""
                =""
$((){
        $("AJAX")((){
                $({
:"",
:,
:":123_101121301",
T:"",
服务端用于接收调用的的参数
:"",
的称
C:"_",
:(){
        ();浏览器调试的时候用
                        },
:(){
        ('');
}
                });
        });
});
               
       


效果如下：

当点击以上文字时，查看请求，发现并没有发出请求

再查看请求，发现发出了一个请求，因此本质是请求而并非请求，只是$把请求封装到了里面而已。

其使用起来已经是很方便了，那为什么现在还会被慢慢抛弃呢个人认为主要原因有以下几点：


要使用必须引入整个大文件，不是很划算;

本身是针对MVC设计模式的编程，与当前流行的基于MVVM模式的、等框架不符;

本质是基于XHR的封装，而XHR本身架构不是很清晰，目前已采用代替方案



总结
随着前端基于MVVM模式的V和R新一代框架的兴起，以及ES6等新规范的制定，像J这种大而全的JS库注定是要走向低潮的。


A

代码示例
({
        :'',
        :'',
        :{
                :'',
                :'1234567'
        }})((){
        ();})((){
        ();});


是一个基于P用于浏览器和的HTTP客户端，本质上也是对原生XHR的封装，只不过它是P的现版本，符比较新的ES规范，有以下几条特性：


从浏览器中创建XMLHR

从中创建请求

支持PAPI

支持转换请求数据和响应数据

支持拦截请求和响应

支持取消请求

自动转换JSON数据

客户端支持防御CSRF攻击



总结
A除了和J一样封装了原生的XHR，还提供了很多比如：并发请求、拦截等多种接口，同时它的体积还比较小，也没有下文的各种问题，可以说是目前比较佳的请求方式了。


F

代码示例
F的功能与XMLHR基本相同，但有个主要的差异：


()使用P，不使用回调函数，因此大大简化了写法，写起来更简洁；

采用模块化设计，API分散在多个对象上（R对象、R对象、H对象）；

通过数据流（S对象）处理数据，可以分块读取，有利于提高性能表现，减少内存占用，对于请求大文件或者速慢的场景相当有用。XMLHTTPR对象不支持数据流，所有的数据必须放在缓存里，不支持分块读取，必须等待全部拿到后，再一次性吐出来。


用法：

('请求地址')
(=())
(=())
(=('RF',));


上面示例中，()接收到的是一个S对象，()是一个异步操作，取出所有内容，并将其转为JSON对象。P可以使用语法改写，使得语义更清晰。

JSON(){
        {
                =();
                =();
                ();
        }(){
                (''+);
        }}


语句必须放在里面，这样才能捕捉异步操作中可能发生的错误。

此外，需要注意一下几点：

1）只有络错误，或者法连接时，()才会报错，即使服务器返回的状态码是4或5，()也不会报错（即P不会变为状态）。要判断请求是否成功，一种方法是通过R属性，得到HTTP回应的真状态码，才能判断请求是否成功，如下所示：

T(){
=();
(=200300){
();
}{
E(T);
}}


上面示例中，属性只有等于2（200~299），才能认定请求成功。这里不用考虑址跳转（状态码为3），因为()会将跳转的状态码自动转为200。

另一种方法是判断是否为。

(){
请求成功}{
请求失败}


2）默认不会带，需要添加配置项（属性）；

3）没有办法原生监测请求的进度，而XHR可以。

F在使用上说话目前还没有和方便，在工作中也是使用的比较多。说到这里，你可能觉得F就是强行用ES新规范做出来的代替XHR的半成品，事上我就是这么认为的。但是有一点F做的性能要远比XHR要好，那就是“跨域的处理”。

因为同源策略的约束，浏览器发送的请求是不能随便跨域的，一定要借助JSONP或者跨域头来协助跨域，而F可以直接设置为“-”来现跨域访问，如下所示

('',{
        :'',
        :'',
        :{:''}})((){**});


我们会得到一个为“”（透明）的。这个请求是真正抵达过后台的，但是浏览器不可以访问返回的内容，这也就是为什么中的为“”（透明）的原因。


总结
F是XMLHR的升级版，虽然部分功能不是十分完善，但是也有它的势所在。浏览器原生提供该对象，当前浏览器基本都支持。基于对象，支持链式写法。

注意点：

1是有兼容问题的

IE系列是完全不支持的，主流浏览器的早起版本也不支持，所以如果在项目中使用需要做兼容方案处理。

2不管请求处理成功还是失败，都会触发的状态回掉。这个和传统的框架是有点区别的。只有当络故障导致请求发送失败或者跨域的时候才会触发的逻辑。我们可以通过对象的是否是来判断是否是真正的成功。









文中提到彩虹聚合DNS天生有着强韧的生命力，经过风吹雨打也能化茧成蝶成为最优秀的自己。https://www.uihtm.com/thinkphp/19705.htmlHTML源码网(www.uihtm.com)提供div+css3响应式模板包括：网页模板、企业模板、商城模板，以及h5网站,jQuery网页特效,wp主题等8000G源码免费模板下载。