发送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 提供了对 RequestResponse (以及其他与网络请求有关的)对象的通用定义。使之今后可以被使用到更多地应用场景中:无论是 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);
})

发表评论