原生ajax
//创建异步对象
var xhr = new XMLHttpRequest();
//设置请求基本信息，并加上请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.open('post', 'test.php' );
//发送请求
xhr.send('name=Lan&age=18');
xhr.onreadystatechange = function () {
// 这步为判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
jqueryAjax
var loginBtn = document.getElementsByTagName("button")[0];
loginBtn.onclick = function(){
ajax({
type:"post",
url:"test.php",
data:"name=lan&pwd=123456",
success:function(data){
console.log(data);
}
});
}
fetch
fetch('http://www.mozotech.cn/bangbang/index/user/login', {
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams([
["username", "Lan"],["password", "123456"]
]).toString()
})
.then(res => {
console.log(res);
return res.text();
})
.then(data => {
console.log(data);
})
axios
axios({
method: 'post',
url: '/abc/login',
data: {
userName: 'Lan',
password: '123'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
同时发起多个请求：
对比
几种方式的对比
ajax：
【优点：局部更新；原生支持】
【缺点：可能破坏浏览器后退功能；嵌套回调】
jqueryAjax：
【在原生的ajax的基础上进行了封装；支持jsonp】
fetch：
【优点：解决回调地狱】
【缺点：API 偏底层，需要封装;默认不带Cookie，需要手动添加; 浏览器支持情况不是很友好，需要第三方的ployfill】
axios：
【几乎完美】axios的特点
支持浏览器和node.js
支持promise
能拦截请求和响应
能转换请求和响应数据
能取消请求
自动转换JSON数据
浏览器端支持防止CSRF(跨站请求伪造)
axios提问
- 如何将
axios异步请求同步化处理？
//使用 asyns/await
async getHistoryData (data) {
try {
let res = await axios.get('/api/survey/list/', {
params: data
})
this.tableData = res.data.result
this.totalData = res.data.count
} catch (err) {
console.log(err)
alert('请求出错！')
}
}
-
为何官方推荐使用
axios而不用vue-resource？在
Vue1.x中，官方推荐使用的ajax库是vue-resource。到了Vue2.x，官方（尤大）推荐的ajax库改为了Axios，按照说法是因为已有一个更完备的轮子，就不需要造一个新的。 -
你了解
axios的原理吗？有看过它的源码吗？ -
你有封装过
axios吗？主要是封装哪方面的？image
到具体页面中的应用：
image -
如何中断（取消）
axios的请求？
image -
axios怎么解决跨域的问题？
image如果
server端是自己开发的，那么修改相关代码支持跨域即可。如果不是自己开发的，那么可以自己写个后端转发该请求，用代理的方式实现。跨域这个行为是浏览器禁止（浏览器不允许当前页面的所在的源去请求另一个源的数据）的，但是服务端并不禁止
-
源指协议、端口、域名。只要这个3个中有一个不同就是跨域。 这里列举一个经典的列子：
协议跨域： http://a.baidu.com访问https://a.baidu.com； 端口跨域： http://a.baidu.com:8080访问http://a.baidu.com:80； 域名跨域： http://a.baidu.com访问http://b.baidu.com； 关键字:
Access-control-Allow-origin、跨域-
A） 开发模式下，可以在
config中配置proxyTable即可
image -
B） 服务端基于spring实现
image -
C）
CORS：①即跨源资源共享，它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。 ②它是一个妥协，有更大的灵活性，但比起简单地允许所有这些的要求来说更加安全。③但是CORS也具有一定的风险性，比如请求中只能说明来自于一个特定的域但不能验证是否可信，而且也容易被第三方入侵。 ④这里一般需要后端配合,开启cors。一般各种语言都有类似的包。比如NodeJS的koa2-cors
image -
D）
Nginx代理proxy
image -
E）
express代理
image 请求头自动携带
cookie时:config中配置withCredentials:true，否则为false【看到有人说：withCredentials为true的情况下，后端要设置Access-Control-Allow-Origin为你的源地址，例如http://localhost:8080，不能是*，而且还要设置header('Access-Control-Allow-Credentials: true')】config中配置qs：避开ajax信使请求，并兼容Android？
import Qs from 'qs'
