This website requires JavaScript.

4种方式Ajax请求

by  饲养员  

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);
})
相关推荐
  • Object 对象的增删改查
  • linux一些常用的命令字符
  • Sass 使用、节约 CSS 代码
  • JavaScript系列之面向对象
  • 前端的计时是否准确,技术方案如何做