Ajax和Fecth

两者都用于无刷新更新数据：即在不刷新页面的情况下，向服务端发送请求获取数据

AJAX(Asynchronous JavaScript+XML)：异步JavaScript加XML

关键是使用XMLHttpRequest(XHR)对象

Fetch：Fetch API提供了一个原生JavaScript接口，用于访问和操纵HTTP管道的一些具体部分

Fetch API可以实现XHR对象的所有任务
并且更容易使用，接口也更现代化

1 XMLHttpRequest对象

概述
XHR的属性、方法、事件
XHR的使用与封装

1.1 概述

起初XHR对象是通过ActiveX对象实现并包含在MSXML库中
现在的浏览器都通过XMLHttpRequest构造函数原生支持XHR对象(低版本IE除外)
```
//IE
var xhr1 = new ActiveXObjet('Microsoft.XMLHTTP')
//主流浏览器
cosnt xhr2 = new XMLHttpRequest()
console.log(xhr2)
```
原型上的一些属性与方法

1.2 XHR的属性、方法、事件

属性

`readyState`	请求状态	1
`onreadystatechange`	状态改变时调用	0
`response`	响应实体	1
`responseType`	定义响应类型	0
responseText	文本数据	1
responseURL	响应URL	1
responseXML	可解析为XML的响应	1
`status`	状态码	1
statusText	完整响应文本	1
`timeout`	最大请求时间	0
`ontimeout`	请求超时时调用	0
withCredentials	布尔值，跨域请求是否可带授权信息	0

方法

`open`(methond,url,async,user,password)	初始化请求
`send`(body)	发送请求
abort()	如果请求发出，终止请求
overrideMimeType(mimeType)	覆盖服务器返回的MIME类型
setReuquestHeader(header,value)	设置HTTP请求头部，在open与send之间使用

事件

loadstart	接收到响应数据时触发
progress	请求接收到更多数据时，接收响应期间反复触发
`error`	请求出错触发
abort	请求被停止时触发
load	请求成功时触发
loadend	请求完成触发，不管成功失败
timeout	在预设时间内没有收到响应时触发

readState属性
0 UNSENT 代理被创建，未调用open()
1 OPENED open()被调用，send()未调用
2 HEADERS_RECEIVED send被调用，头部与状态可获得
3 LOADING 下载中，response可获得
4 DONE 下载操作完成

1.3 XHR的使用与封装

1.3.1 基本使用

<!-- html -->
<button id="req">请求</button>

const btn = document.getElementById('req')

const xhr = new XMLHttpRequest()
btn.addEventListener('click', () => {
    xhr.addEventListener('readystatechange', () => {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                console.log(xhr.response);
            } else {
                console.log(xhr.readyState, xhr.status);
            }
        }
    })
    xhr.open('GET', 'http://localhost:8000', true)
    xhr.send()
    xhr.responseType = 'json'
})

1.3.2 封装

回调封装

封装

function ajaxCallback(url, fnSucc, fnFail) {
  const xhr = new XMLHttpRequest()
  xhr.addEventListener('readystatechange', () => {
      if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
              fnSucc(xhr.responseText)
          } else if (fnFail) {
              fnFail(xhr.status)
          } else {
              console.log('请求出错');
          }
      }
  })
  xhr.open('GET', url, true)
  xhr.send()
}

使用

btn.addEventListener('click', () => {
  ajaxCallback('http://localhost:8000', res => {
      console.log(res);
      ajaxCallback('http://localhost:8085', res => {
          console.log(res);
      })
  })
})

Promise封装

封装

function ajaxPromise(url) {
  return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest()
      xhr.addEventListener('readystatechange', () => {
          if (xhr.readyState === 4) {
              if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                  resolve(xhr.responseText)
              } else {
                  reject(xhr.status)
              }
          }
      })
      xhr.addEventListener('error', () => {
          reject('请求出错');
      })
      xhr.open('GET', url, true)
      xhr.send()
  })
}

使用

btn.addEventListener('click', () => {
  ajaxPromise('http://localhost:8000')
      .then(val => {
          console.log(val);
          return ajaxPromise('http://localhost:8085')
      })
      .then(val => {
          console.log(val);
      })
      .catch(res => {
          console.log(res);
      })
})

2 Fetch API

Fetch API除了请求数据外，也可以在服务端使用，提供拦截、重定向和修改通过fetch()生成的请求

fetch()方法返回Promise，不需要再进行Promise封装

fetch()方法与基本使用
Headers对象
Request对象
Reponse对象
Body混入

2.1 fetch()方法与基本使用

使用fetch()方法
fetch()自定义配置

2.1.1 使用fetch()方法

    fetch('http://localhost:8000')
        .then(response => response.text())
        .then(data => {
            console.log(data);
        })

fetch的第一个参数是url，执行返回一个Promise
第一个then返回Response的实例化对象，调用其text()方法也会返回一个Promise
第二个then可以接收到实际的数据

2.1.2 fetch()自定义配置

在只有一个url参数时进行的是默认的操作，方法使GET，fetch提供了第二个参数，以对象形式进行自定义配置

`body`	指定请求体的内容	Blob、BufferSource、FormData、URLSearchParams、ReadableStream、String的实例
cache	控制浏览器与HTTP缓存的交互	下述
`credentials`	指定请求中如何包含`cookie`	下述
headers	指定请求头	Headers对象实例
integrity	强制资源完整	包含子资源完整性标识符的字符串
keepalive	允许请求存在时间超出页面生命周期	默认false
method	请求方法	默认GET
mode	决定跨域请求的响应是否有效	下述
redirect	如何处理重定向响应	下述
referrer	指定HRRP的Referrer头部内容	下述
`referrerPolicy`	指定Referrer头部内容	下述
signal	支持通过AbortController中断进行中的fetch()请求	默认未关联控制器的AbortSingle实例

cache

default(默认)
no-store
reload
no-cache
force-cache
only-if-cached(仅在mode:same-origin时使用)

credentials
类似于XHR中的withCredentials

omit
same-origin(默认)
include

mode

cors(默认)
no-cors
same-origin
navigate

redirect

follow(默认)
error
manual

referrer

no-referrer
client/about:client(默认)
URL

ReferrerPolicy

no-referrer
unsafe-url
origin
same-origin
origin-when-cross-origin
strict-origin
strict-origin-when-cross-origin
no-referrer-when-downgrade(默认)

2.2 Headers对象

Headers是所有外发请求和入站响应头部的容器，Request和Response实例都有一个Headers实例
Headers对象与Map对象极其相似，都包含get、set、has、delete等实例方法

2.2.1 Headers上的API

const headers = new Headers({
    foo:'bar'
})
console.log(headers)

初始化
append

2.2.2 头部护卫

并非所有HTTP头部都可以被客户端修改

none	初始化Headers实例时	无
request	初始化Request对象，mode非no-cors时	不允许修改禁止修改的头部
request-no-cors	初始化Request对象，mode为no-cors时	不允许修改简单头部
response	初始化Response时	不允许修改禁止修改的响应头部
immutable	通过error()或redirect()初始化Response时	不允许修改任何头部

禁止修改的头部
简单头部
禁止修改的响应头部

2.3 Requset对象

Request对象是获取请求资源的接口

2.3.1 创建与克隆

创建Request对象
Request对象的初始化与fetch()方法类似，都接收两个参数

const request = new Request('a')
console.log(request);

使用Request构造函数克隆Request对象

const req1 = new Request('http://localhost:8000', { body: 'foo', method: 'POST' })
const req2 = new Request(req1)
console.log(req1, req2);
console.log(req1.bodyUsed,req2.bodyUsed) //true false

使用clone()方法克隆Request对象

const req1 = new Request('http://localhost:8000', { body: 'foo', method: 'POST' })
const req2 = req1.clone()
console.log(req1, req2);
console.log(req1.bodyUsed, req2.bodyUsed);//false false

如果请求对象的bodyUsed值为true(请求体已被读取)时，不能克隆

//使用Request克隆后不能再对源对象进行克隆
const req1 = new Request('http://localhost:8000', { body: 'foo', method: 'POST' })
const req2 = req1.clone() //未改变bodyUsed
const req3 = new Request(req1) //改变bodyUsed
const req4 = req1.clone() || new Request(req1) // TypeError
//使用text()读取后不能再克隆
const req1 = new Request('http://localhost:8000', { body: 'foo', method: 'POST' })
req1.text()
cosnt req2 = req1.clone() //TypeError

2.3.2 在fetch()中使用Request对象

可以看出Request构造函数与fetch()拥有相同的函数签名

调用fetch()时，第一个参数可以不是URL而是一个Request实例对象

第二个参数会复制Request的init，可以再添加进行覆盖

//自定义头部
const headers = new Headers({
  foo: 'bar',
})
headers.append('foo', 'baz')
//初始化Request
const req = new Request('http://localhost:8000', {
  body: 'moo',
  method: 'POST',
  credentials: 'include',
  headers
})
//fetch()中使用Requset对象
fetch(req.clone())
  .then(response => response.text())
  .then(data => {
      console.log(data);
  })
fetch(req.clone,{mode: 'no-cors',})

2.4 Response对象

Response对象是获取资源响应的接口

创建

//Response()构造函数创建
const res1 = new Response()
console.log(res1);
//Response.redirect()创建
const res2 = Response.redirect(url,301)
//Response().error()创建
const res3 = Response.error()

init参数

type属性

error	error静态方法创建
basic	同源响应
cors	跨源响应
opaque	no-cors返回的fetch()响应
opaqueredirect	redirect设置为manual的请求的响应

克隆
主要使用clone()方法，与克隆Requset对象类似，克隆一个完全一致的副本，同样通过Response构造函数创建的实例在执行text()读取数据后则不能再克隆

2.5 Body混入

Request和Response都使用Fetch API的Body混入，以实现两者承担有效载荷的能力

混入为两个类型提供的内容

只读的body属性-ReadableStream实现
只读的bodyUsed布尔值-标志body流是否已读
一组方法

Body提供的5个方法
都返回Promise

text()	将缓存区转存得到的UTF-8格式的字符串
json()	将缓存区转存得到的JSON
formData	将缓存区转存得到的formData实例
arrayBuffer()	将缓存区转存得到的ArrayBuffer实例
blob()	将缓存区转存得到的Blob实例

ReadableStream

可以通过ReadableStream构造函数创建一个可读流

locked属性
getReader()方法

关于Streams API的更多内容

_607c00baa52ff

【web通信】Ajax与Fetch