前端时间开发前端项目，对于前后台数据交互，当时在$.ajax()、fetch、axios的选择上出现了一些疑问，当时查询了很多资料，最终选择了axios，在此，对这些技术做一个大概的梳理，后面继续会研究关于AJAX实现的一些底层的东西！
一、AJAX
1、什么是AJAX
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。核心技术为：核心对象XMLHttpRequest.
2、原理
浏览器加载完页面后,可以在不销毁当前页面的前提下,支持分出一部分资源从远程获取数据,并通过脚本语言将返回的部分数据追加到原有页面中
3、Ajax实现步骤
a.创建xhr对象
var xmlhttp=null;
if (window.XMLHttpRequest)
{// code for all new browsers
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
b.open方法创建请求
xmlhttp.open("GET","ajax_info.txt",true);
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
get与post的区别
c.设置回调事件
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
d.send方法发送请求
xmlhttp.send(string);
将请求发送到服务器。
string：仅用于 POST 请求
二、JQUERY对AJAX的实现
$.ajax()方法通过HTTP请求加载远程数据。
简单易用的高层实现见$.get(),$.post();
语法：jQuery.ajax( url [, settings ] ) settings可选。用于配置 Ajax 请求的键值对集合。
常见键值对：async，data，dataType，error，success，type，url
常见使用案例：
$.ajax({
url: "/ajax",
type:"get",
dataType: "json"
success: function(){
alert("请求成功！");
},
error:function(){
alert("请求失败！");
}
});
也可以引入新功能deferred对象
jQuery.ajaxQueue({
url: "/ajax",
type:"get",
dataType: "json"
}).done(function( data ) {
console.log("成功回调");
}).fail(function(data){
console.log("失败回调");
});
可以通过deferred的then()函数来简化：
jQuery.ajaxQueue({
url: "/ajax",
type: "get",
dataType: "json"
}).then(doneFn, failFn);
三、AXIOS
基于Promise的浏览器和node.js的HTTP客户端，由于vue,react等前端技术不需要使用$.ajax()，因此引入jQuery会造成很大负担
做的XMLHttpRequest从浏览器
让HTTP从node.js的请求
支持Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换为JSON数据
客户端支持防止XSRF
常见使用案例：
axios({
method: 'post',
url: url,
data: qs.stringify(reqData)
}).then(res => {
}).catch(err => {
})
四、Fetch
XMLHttpRequest的最新替代技术——Fetch API
fetch()能让我们完成类似 XMLHttpRequest (XHR) 提供的ajax功能。它们之间的主要区别是，Fetch API 使用了 Promises，它让接口更简单、简洁，避免了回调的复杂性，省去了使用复杂的 XMLHttpRequest API。
常见使用案例：
fetch(url).then(function(response){
return response.json();
}).then(function(data){
console.log(data)
}).catch(function(e){
console.log("error")
})
优点：
语法简洁，更加语义化
基于标准的Promise实现，支持async/await
同构方便
缺点：
fetch请求默认是不带cookie的，需要设置fetch(url, {credentials: 'include'})
服务器返回400,500这样的错误码时不会reject,只有网络错误这些导致请求不能完成时，fetch才会被reject.
五、技术选择
其实个人看法，如果是传统的项目，不使用vue、react这些前端框架，引入jQuery是快捷开发前端项目不错的选择，使用$.ajax()很不错！如果采用vue、react目前主流的前端技术，采用react、Fetch是很不错的选择，额外引用jQuery框架不太合适。但是从IE兼容性方面，还是需要去考虑技术的选型！
网友评论