浏览器4-AJAX：前端请求数据的几种方式

福玻斯
578 阅读3分钟

AJAX 是一种使用 js脚本 向服务器发起http通信，根据服务器返回的数据，更新网页中相关的部分（不会刷新整个网页）的异步通信方法，主要通过原生的XMLHttpRequest对象实现。

Ajax 使用步骤 / 原理

  • 创建 xhr 实例。
  • 配置 Ajax 请求(不一定是http)的参数：请求方式、目标 url、是否异步通信。
  • 发送请求。
  • 监听请求，接收响应并更新网页数据json格式。
var xhr = new XMLHttpRequest();  // 新建实例
xhr.open('GET', '/endpoint', true);  // 指定连接细节
xhr.onreadystatechange = function(){  // 指定监听函数
  // 通信成功时，状态值为4
  if (xhr.readyState === 4){
    if (xhr.status === 200)
      console.log(xhr.responseText);
  }
};
xhr.onerror = function (e) {
  console.error(xhr.statusText);
};
xhr.send(null);

一、XMLHttpRequest实例的属性

1. readyState：只读属性

返回一个整数，表示实例对象的当前状态。每当状态发生变化，readyState就会跟着变化，就会触发 readyStateChange 事件。

  • 0：已经生成 xhr 实例，但还没调用 open 方法。
  • 1：已经调用 open 方法，但还没调用 send 方法。
  • 2：已经调用 send 方法，并且服务器返回的头信息和状态码已经收到。
  • 3：正在接收服务器传来的响应体中的数据。这时如果实例的responseType属性等于 text 或 空字符串，responseText 属性就会包含已经收到的部分数据。
  • 4：已经完全接收返回的数据，或者，本次接收已经失败。

2. onreadystatechange

指向一个监听函数，当 readyState变化 -> 触发readyStateChange事件 -> 执行onreadystatechange指向的监听函数。

3. status、statusText

  • status 返回一个整数，表示响应的状态码，基本只有2xx 和 304才表示服务器返回是正常状态。
  • statusText 返回字符串，包含状态码、原因短语。

4. responseType、responseText

  • responseType：表示服务器返回的数据类型。
  • responseText：返回从服务器接收到字符串。

5. withCredentials

布尔值、默认 false，表示跨域请求时用户信息(cookie等)是否包含在请求之中。

CORS请求中如果要携带cookie就要设置为 true，同源请求不需要设置该属性。为了让该属性生效，服务器还必须显式返回 Access-Control-Allow-Credentials：true这个头信息。

二、XMLHttpRequest实例的方法

1. open

指定 http 请求的参数，共5个：

  • method：请求方法。
  • url：目标url。
  • async：请求是否异步，默认 true。
  • user (可选): 用于认证的用户名。
  • password (可选)：用于认证的密码

2. send

发出 http 请求，参数可选。如果不带参数，表示 http 请求只有一个 url，没有数据体，例如 get请求。如果带有参数，表示 http 请求还包括数据体，例如 post 请求。

注意：所有监听事件，都必须在 send() 之前设置。

3. abort

终止已经发出的 http 请求，调用后，readyState 变为4，status 变为0

三、前端请求数据的几种方式

image.png

1. XMLHttpRequest：见上文

2. Fetch

Fetch基于promise，接收到错误的状态码500等时，返回的promise状态标记的是resolve，仅当网络故障或者请求被阻止才会标记为reject。

fetch('./mock/orders.json')
.then(res => {
  if(res.ok) {
    res.json().then(data => {
      this.setState({
        data
      })
    })
  }
})
.catch()

3. Axios库

axios是基于promise的http库，通过promise指定回调函数。axios能够在node和浏览器中使用，支持promise的api。（推荐）

axios.get('/api/headerList.json')
.then((res) => {
  const data = res.data;
  dispatch(changeList(data.data));
})
.catch(() => {
  console.log('error');
})
avatar
文章
阅读
粉丝