1、XMLHttpRequest
XMLHttpRequest是WebAPI中的标准对象,可发起Ajax请求。三步曲:
* 创建XMLHttpRequest对象;
* open方法设置请求方式及url地址;
* send方法正式发起请求;
<script>
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = event => {
console.log(event);
}
xhr.open('get', 'https://jsonplaceholder.typicode.com/todos');
xhr.send();
</script>
除此之外,还有一些常用的属性及方法
* responseType
属性设置返回数据类型;
* onreadystatechange
属性监听状态变化,获取返回数据;
* timeout
属性设置超时时间;
* ontimeout
属性设置超时回调方法;
* onerror
属性设置错误回调方法;
* 官方文档:MDN参考链接
2、Fetch
fetch是一个全局作用下的函数,该函数返回一个Promise,是官方提供的一个新的发起Ajax请求的WebAPI。
fetch使用也非常简单,默认get请求可以只传入一个url地址。
fetch('https://jsonplaceholder.typicode.com/todos/1').then(response => {
console.log(response);
return response.json();
}).then(json => {
console.log(json);
})
引用官方的一段话:
Fetch 提供了对
Request
和Response
(以及其他与网络请求有关的)对象的通用定义。使之今后可以被使用到更多地应用场景中:无论是 service worker、Cache API、又或者是其他处理请求和响应的方式,甚至是任何一种需要你自己在程序中生成响应的方式。
我的理解是,fetch在将来会成为XMLHttpRequest的一个替代品,因为fetch对异步请求和响应进行了重新设计,会更加通用与灵活,使用起来也很简单。但就目前而言,兼容性还不是很好,一些功能还在完善中……
3、jQuery
jQuery绝对是一个伟大的发明,它使得dom操作变得简单而直观,并且还解决了一大部分的兼容性问题,在Ajax请求方面,jQuery同样对XMLHttpRequest进行了封装,使得Ajax请求变得简单而直观。
* 常规调用
// jQuery Ajax请求
$.ajax('https://jsonplaceholder.typicode.com/todos', {
data: { // 数据
a: 1,
b: 2
},
headers: { // 头部信息
ContentType: 'application/json',
a: 1
},
success: function (response) {
console.log('ajax: ', response);
}
}).done(function (response) {
// 结果回调
console.log('done', response);
})
// 最简调用
$.ajax('https://jsonplaceholder.typicode.com/todos').then(response => {
console.log(response);
})
- jQuery针对get与post请求还有两个简化的调用
// jQuery Ajax Get请求
$.get('http://localhost:3000/jquery', {
a: 1,
b: 2
}, function (response) {
console.log('get:', response);
})
// jQuery Ajax Post请求
$.post('http://localhost:3000/jquery', {
a: 1,
b: 2
}, function (response) {
console.log(response);
})
4、Axios
- axios的使用与jQuery类似
// 设置默认参数
axios.defaults.baseURL = 'http://127.0.0.1:3000';
Axios发送post请求
axios.post('http://127.0.0.1:3000/axios', {
a: 1,
b: 2
}, {
headers: {
'ContentType': 'application/json'
}
}).then(function (response) {
console.log(response);
})
// axios发送请求
axios({
method: 'get',
url: 'axios',
headers: {
// 设置Content-Type无效
'Content-Type': 'application/json'
},
params: {
a: 1,
b: 2
},
data: {
key: 'value'
}
}).then(response => {
console.log(response);
})