ajax请求方式 问答题,发送Ajax请求的4种方式

1、XMLHttpRequest

XMLHttpRequest是WebAPI中的标准对象，可发起Ajax请求。三步曲：

创建XMLHttpRequest对象；

open方法设置请求方式及url地址；

send方法正式发起请求；

let xhr = new XMLHttpRequest();

xhr.onreadystatechange = event => {

console.log(event);

}

xhr.open('get', 'https://jsonplaceholder.typicode.com/todos');

xhr.send();

复制代码

除此之外，还有一些常用的属性及方法

responseType属性设置返回数据类型；

onreadystatechange属性监听状态变化，获取返回数据；

timeout属性设置超时时间；

ontimeout属性设置超时回调方法；

onerror属性设置错误回调方法；

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);

})

复制代码