Ajax,jQuery ajax,axios和fetch的区别_jquery、axios和fetch运行ajax的区别-优快云博客

本文链接：https://blog.youkuaiyun.com/Roselane_Begger/article/details/104603311

Ajax,jQuery ajax,axios和fetch的区别

Ajax：

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax技术核心就是XMLHttpRequest对象。

（1）设置请求参数（请求方式，请求页面的相对路径，是否异步发送请求）

（2）设置回调函数，一个处理服务器响应的函数，使用 onreadystatechange ，类似函数指针

（3）获取异步对象的readyState 属性：该属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。

（4）判断响应报文的状态，若为200说明服务器正常运行并返回响应数据。

（5）读取响应数据，可以通过 responseText 属性来取回由服务器返回的数据。

var xhr = new XMLHttpRequest();    			// 创建Ajax对象
xhr.open('get', 'aabb.php', true);			// xhr发送请求
xhr.send(null);
xhr.onreadystatechange = function() { 		// xhr获取响应
    if(xhr.readyState == 4) {
        if(xhr.status == 200) {
            console.log(xhr.responseText);
        }
    }
}
 /* ajax返回的状态:
     0：（未初始化）请求还没有建立（open执行前） 
     1：（载入）请求建立了还没发送（执行了open） 
     2：（载入完成）请求正式发送,send()方法执行完成，已经接收到全部响应内容（执行了send） 
     3：（交互）请求已受理，有部分数据可以用，但还没有处理完成,正在解析响应内容
     4：（完成）响应内容解析完成，可以在客户端调用了 
*/

Jquery Ajax：

是jQuery框架中的发送后端请求技术，由于jQuery是基于原始的基础上做的封装，所以，jquery Ajax自然也是对原始ajax的封装

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

优缺点：

本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）

Fetch：

fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。

但是，一定记住fetch不是ajax的进一步封装，而是原生js。Fetch函数就是原生js，没有使用XMLHttpRequest对象。

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

你还可以通过Request构造器函数创建一个新的请求对象，你还可以基于原有的对象创建一个新的对象。新的请求和旧的并没有什么不同，但你可以通过稍微调整配置对象，将其用于不同的场景。例如：

var req = new Request(URL, {method: 'GET', cache: 'reload'});
fetch(req).then(function(response) {
  return response.json();
}).then(function(json) {
  insertPhotos(json);
});

fetch和ajax 的主要区别

1、fetch()返回的promise将不会拒绝http的错误状态，即使响应是一个HTTP 404或者500

2、在默认情况下 fetch不会接受或者发送cookies

fetch的配置

Promise fetch(String url [, Object options]);
Promise fetch(Request req [, Object options]);

Axios：

axios不是原生JS的，需要进行安装，它不但可以在客户端使用，而且可以在nodejs端使用。Axios也可以在请求和响应阶段进行拦截。同样也是基于promise对象的。

https://blog.youkuaiyun.com/Roselane_Begger/article/details/88936818

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});