前端杂谈 · Web

XMLHttpRequest

•̀.̫•́✧ · 7月26日 · 2020年本文1735字 · 阅读5分钟27

AJAX 步骤

  1. 创建 XMLHttpRequest 实例
  2. 发出 Http 请求
  3. 接收服务器传回的数据
  4. 更新网页数据

XMLHttpRequest 实例属性

  • readyState:返回一个整数,表示实例对象的当前状态
    • 0,表示 XMLHttpRequest 实例已经生成,但实例的 open() 方法还没有被调用
    • 1,表示 open() 方法已经调用,但是实例的 send() 方法还没有调用,仍然可以使用实例的 setRequestHeader() 方法,设定 HTTP 请求的头信息
    • 2,表示实例的 send() 方法已经调用,并且服务器返回的头信息和状态码已经收到
    • 3,表示正在接收服务器传来的数据体(body 部分)。这时,如果实例的 responseType 属性等于 text 或者空字符串,responseText 就会包含已经接收到的部分
    • 4,表示服务器返回的信息已经完全接收,或者本次请求已经失败
  • onreadystatechange:指向一个监听函数,readystatechange 事件发生时,就会执行这个属性。如果使用 abort 方法,终止 XMLHttpRequest 请求,也会造成 readyState 属性变化,下面是一个例子:
const  xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com', true);
xhr.onreadystatechange = function () {
  if (xhr.readystate !== 4 || xhr.status !== 200) {
      return;
  }
  console.log(xhr.responseText)
}
xhr.send()
  • response 服务器返回的数据体
  • responseType 服务器返回数据的类型
  • responseText 从服务器接收的字符串
  • responseXML 从服务器接收的 XML 或 HTML 文档
  • responseURL 发送数据的服务器网址
  • status HTTP 响应状态码
  • statusText HTTP 响应状态码文字描述
  • timeout 请求时间限制
  • ontimeout timeout 的监听事件

事件监听属性

  • onloadstart (HTTP 请求发出)的监听函数
  • onprogress (正在发送和加载数据)的监听函数
  • onabort 请求中止,比如用户调用了 abort () 方法)的监听函数
  • onerror (请求失败)的监听函数
  • onload (请求成功完成)的监听函数
  • ontimeout (用户指定的时限超过了,请求还未完成)的监听函数
  • onloadend(请求完成,不管成功或失败)的监听函数

withCredentials

这是一个布尔值,表示跨域请求时,用户信息(如 Cookie 和认证的 HTTP 头信息)是否会包含在请求之中,默认为 false

如果需要跨域 AJAX 请求发送 Cookie, 需要设置 withCredentials 为 true,同源请求不需要。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com', true);
xhr.withCredentials = true;
xhr.send(null);

为了让这个属性生效,服务器必须显式返回 Access-Control-Allow-Credentials 这个头信息

upload

可以获得一个监听上传文件的对象,主要方法就是监听这个对象的各种事件:loadstart、loadend、load、abort、error、progress、timeout

实例方法

open

用于指定 HTTP 请求的参数

  • method HTTP 动词方法,如 GET,POST,PUT,DELETE,HEAD
  • url:表示请求发送目标 URL
  • async:布尔值,表示请求是否异步

send

用于实际发出 HTTP 请求

setRequestHeader

用于设置浏览器发送的 HTTP 请求的头信息

overrideMImeType

指定 MIME 类型,覆盖服务器返回的真正的 MIME 类型,从而让浏览器有不一样的处理。

getResponseHeader

返回 HTTP 头信息指定字段的值

getAllResponseHeaders

表示服务器发来的所有 HTTP 头信息

abort

终止已经发出的 HTTP 请求

0 条回应