Ajax
- 全称是
Asynchronous JavaScript and XML，其中，Asynchronous是异步的意思。 -
ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。- 使用
CSS和XHTML来表示。 - 使用
DOM模型来交互和动态显示。 - 使用
XMLHttpRequest来和服务器进行异步通信。 - 使用
javascript来绑定和调用。
- 使用
-
Ajax的原理简单来说是通过XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。XMLHttpRequest是Ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
//ajax-get：
//实例化XMLHttpRequest对象，与服务器通信，模拟http请求
var xhr = new XMLHttpRequest();
//请求行
xhr.open('get','./get.php?key1=val1&key2=val2');
//请求头
xhr.setRequestHeader('content-Type','text/html');
//请求主体
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}
//ajax-post：
//实例化XMLHttpRequest对象，与服务器通信，模拟http请求
var xhr = new XMLHttpRequest();
//请求行
xhr.open('post','./ajax-post.php');
//请求头
xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded');
//请求主体
xhr.send('key1=val1&key2=val2');
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}
-
Ajax 的优点：
- 无刷新更新数据:在不刷新整个页面的前提下与服务器通信维护数据。这使得
Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。 - 异步与服务器通信：
AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。 - 前端和后端负载平衡：可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
- 基于标准被广泛支持: 不需要下载插件或者小程序。
- 界面与应用分离
- 无刷新更新数据:在不刷新整个页面的前提下与服务器通信维护数据。这使得
-
Ajax的缺点-
AJAX干掉了Back和History功能，即对浏览器机制的破坏 -
AJAX的安全问题 - 对搜索引擎支持较弱
- 破坏程序的异常处理机制
- 违背
URL和资源定位的初衷 - 客户端过肥，太多客户端代码造成开发上的成本
-
XMLHttpRequest
let xhr = new XMLHttpRequest();
// 请求成功回调函数
xhr.onload = e => console.log('request success');
// 请求结束
xhr.onloadend = e => console.log('request loadend');
// 请求出错
xhr.onerror = e => console.log('request error');
// 请求超时
xhr.ontimeout = e => console.log('request timeout');
// 请求回调函数
xhr.onreadystatechange = () => {};
// 设置超时时间,0表示永不超时
xhr.timeout = 0;
// 初始化请求
xhr.open('GET/POST/DELETE/...', '/url', true || false);
// 发送请求
xhr.send(null || new FormData || 'a=1&b=2' || 'json字符串');
// 接收数据
console.log(xhr.responseText);
// 取消当前响应，关闭连接并且结束任何未决的网络活动
xhr.abort();
JQ ajax
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
});
特性：
- 本身是针对mvc编程，不符合mvvm前端开发流程
- 基于原生XHR进行开发，XHR结构本身不清晰
- JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理
axios
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
特性：
- 从浏览器中创建XMLHttpRequest
- 从node.js 中发出http请求
- 支持 Promise API
- 客户端支持防止CSRF（伪脚本攻击）
- 提供了并发请求API接口
- 支持请求/响应拦截、取消请求
- 自动转换json数据
用法：详见
- 执行多个并发请求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));
- post 请求
默认情况下，axios 将 JavaScript 对象序列化为 JSON。要以application / x-www-form-urlencoded格式发送数据，您可以使用以下选项之一。
const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));
- 封装：详见
fetch
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
特性：
- 关注分离，没有将输入、输出和用事件来跟踪的状态混合在一个对象中
- 更好更方便的写法
- 更加底层化，提供了丰富的API
- 脱离了XHR
- fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
- fetch默认不会带cookie，需要添加配置项
- fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费
- fetch没有办法原生监测请求的进度，而XHR可以
总结
更倾向于 axios
