XMLHttpRequest

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, 需要设置 withCredentialstrue,同源请求不需要。

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 请求

JS
本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!