发送Ajax请求的4种方式

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