Web网络请求

 

AJAX

AJAX(Asynchronous JavaScript And XML)是一种使用XMLHttpRequest技术构建更复杂,动态的网页的编程实践。

AJAX允许只更新一个 HTML 页面的部分 DOM,而无须重新加载整个页面。


#### XMLHttpRequest

```XMLHttpRequest(XHR)```用于与服务器交互。通过```XMLHttpRequest```可以在不刷新页面的情况下请求特定 URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。  

// 配置 const xhrReq = new XMLHttpRequest() xhrReq.open(method, url, async, user, password) xhrReq.setRequestHeader(header, value) xhrReq.timeout = 2000

// 下载监听 xhrReq.onreadystatechange = function () { // 0 UNSENT 代理被创建,但尚未调用 open() 方法。 // 1 OPENED open() 方法已经被调用。 // 2 HEADERS_RECEIVED send() 方法已经被调用,并且头部和状态已经可获得。 // 3 LOADING 下载中; responseText 属性已经包含部分数据。 // 4 DONE 下载操作已完成。 xhrReq.readyState

// "":默认类型DOMString,与设置text相同。
// arraybuffer:包含二进制数据的 JavaScript ArrayBuffer。
// blob:包含二进制数据的 Blob 对象 。
// document:HTML Document 或 XML XMLDocument,这取决于接收到的数据的 MIME 类型。
// json:JSON对象。
// text:DOMString对象。
xhrReq.responseType

// 返回响应的正文
xhrReq.response

// 返回响应的全部
xhrReq.responseText

// 返回响应的URL。如果有锚点,则#后面的内容会删除。如果有重定向,则是最终的URL
xhrReq.responseURL

// 当responseType==document时为解析后的Document;否则为null
xhrReq.responseXML

// 状态码
xhrReq.status

// 状态码及文本信息
xhrReq.statusText

// 以字符串的形式返回所有用 CRLF 分隔的响应头,如果没有收到响应,则返回 null。
XMLHttpRequest.getAllResponseHeaders()

// 返回包含指定响应头的字符串,如果响应尚未收到或响应中不存在该报头,则返回 null。
XMLHttpRequest.getResponseHeader(header) }

// 上传监听 const XMLHttpRequestUpload = XMLHttpRequest.upload XMLHttpRequestUpload.onloadstart = function… // 获取开始 XMLHttpRequestUpload.onprogress = function… // 数据传输进行中 XMLHttpRequestUpload.onabort = function… // 获取操作终止 XMLHttpRequestUpload.onerror = function… // 获取失败 XMLHttpRequestUpload.onload = function… // 获取成功 XMLHttpRequestUpload.ontimeout = function… // 获取操作在用户规定的时间内未完成 XMLHttpRequestUpload.onloadend = function… // 获取完成(不论成功与否)

// 操作 xhrReq.send(body) xhrReq.abort()


## FetchAPI

const Promise = fetch(url, data)

// data 看起来像这样: { body: JSON.stringify(data), // must match ‘Content-Type’, can be string or {object} cache: ‘no-cache’, // *default, no-cache, reload, force-cache, only-if-cached credentials: ‘same-origin’, // include, same-origin, *omit headers: { ‘user-agent’: ‘Mozilla/4.0 MDN Example’, ‘content-type’: ‘application/json’ }, method: ‘POST’, // *GET, POST, PUT, DELETE, etc. mode: ‘cors’, // no-cors, cors, *same-origin redirect: ‘follow’, // manual, *follow, error referrer: ‘no-referrer’, // *client, no-referrer }

// 上传文件,无法监控progress const formData = new FormData(); formData.append(‘file’, file); fetch(url, { method: ‘PUT’, body: formData })

// 处理响应 Promise.then(function(response) { if(response.ok) { // 请求成功 response.headers // 包含此 Response 所关联的 Headers 对象。 response.ok // 包含了一个布尔值,标示该 Response 成功(HTTP 状态码的范围在 200-299)。 response.redirected // 表示该 Response 是否来自一个重定向,如果是的话,它的 URL 列表将会有多个条目。 response.status // 包含 Response 的状态码 (例如 200 表示成功)。 response.statusText // 包含了与该 Response 状态码一致的状态信息(例如,OK对应 200)。 response.type // 包含 Response 的类型(例如,basic、cors)。 response.url // 包含 Response 的URL。 response.useFinalURL // 包含了一个布尔值,来标示这是否是该 Response 的最终 URL。 response.body // 一个简单的 getter,用于暴露一个 ReadableStream 类型的 body 内容。 response.bodyUsed // 包含了一个布尔值来标示该 Response 是否读取过 Body。

	response.clone() // 创建一个 Response 对象的克隆。
	response.redirect(url) // 用另一个 URL 创建一个新的 Response。
	response.arrayBuffer() // 读取 Response 对象并且将它设置为已读(因为 Responses 对象被设置为了 stream 的方式,所以它们只能被读取一次),并返回一个被解析为 ArrayBuffer 格式的 Promise 对象。
	response.blob()
	response.formData()
	response.json()
	response.text()
}
else { // 其它故障 } }).catch(function(error) {
// 网络故障 }) ```

axios

跨域

跨域请求

跨域传参

跨域存储数据

跨域重定向