XMLHttpRequest

这是一个构造函数，使用new来创建一个实例

api

  1. XMLHttpRequest.readyState（只读）

    返回一个XHR实例当前状态的数字
    0（unsent）代表实例被创建完毕，但是还没有调用open方法
    1（opened）代表open方法已经被调用，可以通过setRequestHeader方法来设置请求的头部， 可以调用send方法来发起请求
    2（headers received）代表send方法已经被调用，接收到了响应头
    3（loading）代表资源正在接收中
    4（done）代表请求操作已经完成
    可以使用xhr.DONE类似的接口来表示状态
    注意 ie中状态名字不同

  2. XMLHttpRequest.onreadystatechange

    在readyState变化的时候，会调用这个方法，可以检测readyState的值来定制方法
    abort方法的中止所改变的readyState不会触发这个readyStateChange事件

  3. XMLHttpRequest.abort( ) 中止，如果请求已经被发出，那么这个方法会立刻中止请求，并将readyState设置为0

  4. XMLHttpRequest.response（只读）返回响应的正文

    有六种类型，如果类型是text或者是’ ‘，那么表示接收的是DOMString，response可以显示调用时的接收内容
    其他情况下，如果请求未完成或者失败了，那么response则是null

  5. XMLHttpRequest.responseText（只读）返回响应的DOMString

    请求为完成，则会包含部分内容，send未调用，则返回空字符串，请求失败，则返回null

  6. XMLHttpRequest.responseType 可以手动设置返回数据的类型

    基本类型有六种，但是我们可以自定义类型，这需要服务器和客户端的兼容，如果对不上，那么会返回null

  7. XMLHttpRequest.responseURL 返回请求的url

    部分不会显示，重定向情况下会显示最终的url

  8. XMLHttpRequest.responseXML（只读）返回请求中的XML或者HTML

    responseType如果被设置成’’或者text（默认），则会按照text/xml来解析
    如果设置成document，则会按照text/html来解析
    如果没有xml或者html那么就会返回null

  9. XMLHttpRequest.status（只读）返回响应的状态码，例如200

    请求完成前，status为0，如果请求出错，status也为0

  10. XMLHttpRequest.statusText（只读）返回状态码对应的文本信息，如200的OK

  11. XMLHttpRequest.timeout 规定一个超时时间，与ontimeout事件对应，超时会触发这个事件

    注意：不应该在同步请求中使用超时，异步请求的方法为open（’get’,url,true）第三个参数true表示请求是异步的

  12. XMLHttpRequest.withCredentials 指明是否要发送证书信息（例如cookie，authorization）

    注意：如果不打开这个选项，那么浏览器就不会发送cookie，当打开这个选项时，需要服务器显式的设置跨站点访问控制请
    求（cross-site Access-Control），而不能使用星号对所有站点进行设置。另外，同站点的选项设置是没有用的。
    注意：设置了这个选项而获得的第三方的cookie，依然享受同源策略，不能使用document.cookie进行访问

  13. XMLHttpRequest的进度事件，可以利用xhr.onload这样的方法来添加事件监听

    loadstart 表示开始接收响应，在接收到第一个响应数据的时候触发
    progress 表示响应接收的过程，大概50ms触发一次
    error 在请求发生错误时触发
    abort 在调用abort中止方法的时候触发
    load 接收完整响应时触发
    timeout 超时时触发
    loadend 在请求完成时触发（例如error错误而完成，abort错误而完成，load接收完整时触发，timeout超时而触发），浏览
    器会在这四个中任意一个触发后，触发loadend事件
    事件过程，loadstart-progress(50ms)-load/error/abort/timeout-loadend

  14. XMLHttpRequest.getResponseHeader(name)得到当前响应的对应头部内容，例如content-type，需要注意的是，content-type这样的头部字段是不区分大小写的，但是值是区分大小写的，而且方法类似于POST也是区分大小的。

  15. XMLHttpRequest.getAllResponseHeaders（）返回完整的头部信息
  16. XMLHttpRequest.open（method, url, async, user, password）接收这几个参数，用来初始化请求
  17. XMLHttpRequest.send（body）如果是异步请求，这个方法会立即返回，如果是同步请求，则会在响应到达后返回

  18. XMLHttpRequest.setRequestHeader（header, value）用来设置请求的头部，多次对一个头部信息进行设置，会将其合并

    注意：这个设置要在open（）和send（）之前调用

  19. XMLHttpRequest.overrideMimeType（mimeType）用来强制指定一个资源类型，以代替服务器指定的资源类型，例如没有指明资源类型时，默认情况下会按照text/xml来处理，这时我们可以用这个方法来指定一种资源类型

    fetch

    1. const response = fetch(url，init);

    接收参数fetch（url，init）init包括method，headers等，没有init则默认是get请求，会返回一个promise
    如果需要进行post，则需要通过init传入相关参数
    举个例子

    1. const test = fetch(
    2. "https://jsonplaceholder.typicode.com/posts"
    3. ).then(response => {
    4. response.json().then(result => {
    5.   console.log(result);
    6. });
    7. });
    8. //另一种是通过async,await
    9. async function getData(){
    10. let response = await fetch(url, init); // 解析 response header
    11. let result = await response.json(); // 将 body 读取为 json
    12. }

    fetch返回一个promise，并将response（请求）的内容传入，response.json()也返回一个promise，将响应体的内容传入

    response的属性

    image.png
    主要用的有
    response.status
    response.ok
    response.headers
    等等

    获取响应体的方法

  • response.text()
  • response.json()
  • response.formData()
  • response.blob()
  • response.arrayBuffer()

注意：获取响应体的方法只能使用一次，多次解析会报错。并且上述方法都是返回一个promise，将结果作为参数传入。

response.headers

补充：headers可以通过new Header（）来生成
image.png
append（name，value）给headers添加头部
delete（name）删除一个headers的内容
entries（）返回一个headers的迭代器
get（name）返回对应的值
has（name）返回一个布尔值 检测是否存在该内容
set（name，value）看上去和append很像，只是在已存在头部信息的时候表现有差异，append会在末尾增加，set会直接覆盖，如果不存在则会创建一个新的头部，然后赋值
keys（）values（）均是以迭代器形式返回headers的值