XMLHttpRequest

最新推荐文章于 2024-07-07 19:49:58 发布

前端小峰

最新推荐文章于 2024-07-07 19:49:58 发布

阅读量265

点赞数 1

文章标签： ajax

本文链接：https://blog.csdn.net/Shaoyouiqng/article/details/103828199

版权

XMLHttpRequest

XMLHttpRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通信。
最早，微软在IE 5引进了这个接口。后来各大浏览器纷纷效仿也提供了这个接口，再后来W3C对它进行了标准化，提出了XMLHttpRequest标准。XMLHttpRequest标准又分为Level 1和Level 2。也是AJAX的主要实现原理，它的存在使得在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的艺术。

// 创建一个XMLHttpRequest对象  
// IE6, IE5
// var xhr = new ActiveXObject("Microsoft.XMLHTTP");

// IE7+, Firefox, Chrome, Opera, Safari
var xhr = new XMLHttpRequest()

// 重置服务器端返回的类型
xhr.overrideMimeType('image/png')

// 初始化一个请求 参数3：表示该请求应该以`异步模式`执行。
xhr.open('GET', 'https://www.jianshu.com/shakespeare/notes/40193041/user_notes', true)

 // 超时时间，单位是毫秒
xhr.timeout = 2000;

// 设置 HTTP 请求头的值。在`open()`之后、`send()`之前调用`setRequestHeader()`方法。
xhr.setRequestHeader('test', 'test')

// 发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回。
xhr.send()

// 只要 `readyState` 属性发生变化，就会调用相应的处理函数。这个回调函数会被用户线程所调用。当一个`XMLHttpRequest`请求被abort()方法取消时，其对应的 `readystatechange`事件不会被触发。
xhr.onreadystatechange = function(){
    if ( xhr.readyState == 4 && xhr.status == 200 ) {
            console.info(xhr)
            console.info(xhr.getAllResponseHeaders())
            console.info(xhr.getResponseHeader('content-type'))
            console.info( xhr.responseText );
            console.info( xhr.response);
    } else {
             console.info( xhr.statusText );
    }
}

// 取消请求
// xhr.abort()

onreadystatechange
只要 readyState 属性发生变化，就会调用相应的处理函数。这个回调函数会被用户线程所调用。当一个XMLHttpRequest请求被abort()方法取消时，其对应的 readystatechange事件不会被触发。

readyState

值	状态	描述
0	UNSENT	XMLHttpRequest 代理已被创建，但尚未调用 open() 方法。
1	OPENED	open() 方法已经被触发。在这个状态中，可以通过 setRequestHeader()方法来设置请求的头部，可以调用send()方法来发起请求。
2	HEADERS_RECEIVED	send() 方法已经被调用，响应头也已经被接收。
3	LOADING	下载中；`responseText`属性已经包含部分数据。
4	DONE	下载操作已完成。

status
status码是标准的HTTP status codes。在请求完成前，status的值为0。值得注意的是，如果 XMLHttpRequest 出错，浏览器返回的 status 也为0。

response
响应的正文，返回的类型可以是ArrayBuffer、Blob、Document、 JavaScriptObject或DOMString。这取决于responseType，XMLHttpRequest.responseType 属性是一个枚举类型的属性，返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串，它将使用默认的"text"类型。

responseType

值	描述
" "	将`responseType`设为空字符串与设置为`"text"`相同，是默认类型（实际上是`DOMString`）。
“arraybuffer”	`response`是一个包含二进制数据的 JavaScript`ArrayBuffer`。
“blob”	`response`是一个包含二进制数据的`Blob`对象。
“document”	`response`是一个HTML `Document`或XML `XMLDocument`，这取决于接收到的数据的 MIME 类型。
“json”	`response`是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为JSON解析得到的。
“text”	`response`是包含在`DOMString`对象中的文本。

responseText
服务器返回的文本数据

statusText
服务器返回的状态文本

timeout
是一个无符号长整型数，代表着一个请求在被自动终止前所消耗的毫秒数。默认值为 0，意味着没有超时。

upload
返回一个XMLHttpRequestUpload对象，用来表示上传的进度。可以通过对其绑定事件来追踪它的进度。

事件	信息类型
onloadstart	开始
onprogress	数据传输进行中
onabort	操作终止
onerror	失败
onload	成功
ontimeout	操作在用户规定的时间内未完成
onloadend	完成（不论成功与否）

withCredentials
属性是一个[Boolean]类型，它指示了是否该使用类似cookies,authorization headers(头部授权)。

FormData
提供了一种表示表单数据的键值对的构造方式，此方法相当简单直接。如果送出时的编码类型被设为"multipart/form-data"，它会使用和表单一样的格式。

// 参数可选
let formData = new FormData(`<Form表单元素>`)

// 添加参数 **filename** 传给服务器端的文件名称，默认为该文件的名称
formData.append(name, value, filename<可选>)

// 删除参数
formData.delete(name)

// 返回一个迭代器对象，此对象可以遍历`formData`中的键值对
formData.entries()

// 返回指定的键关联的第一个值
formData.get(name)

// 返回指定的键关联的所有值
formData.getAll(name)

// 表示该对象是否包含某个`key`
formData.has(name)

// 返回一个迭代器，遍历所有的keys
formData.keys()

// 对对象中的某个`key`设置一个新的值，如果不存在，则添加。
formData.set(name, value, filename<可选>)

// 返回一个迭代器，遍历所有的值
formData.values()

abort()
调用该方法将终止该请求。当一个请求被终止，它的 readyState 属性将被置为0（UNSENT )。

getAllResponseHeaders()
该方法返回所有的响应头，以CRLF分割的字符串，或者null如果没有收到任何响应。

setRequestHeader()
设置 HTTP 请求头的值。在open()之后、send()之前调用setRequestHeader()方法。

getResponseHeader()
该方法返回包含指定头文本的字符串。

overrideMimeType()
该方法是指定一个MIME类型用于替代服务器指定的类型，使服务端响应信息中传输的数据按照该指定MIME类型处理。（服务器端没有指定一个Content-Type头）

XHR事件

// 开始请求
xhr.addEventListener('loadstart', handleEvent);
// 请求完成
xhr.addEventListener('load', handleEvent);
// 一个资源的加载进度停止之后被触发（例如，在已经触发“error”，“abort”或“load”事件之后）
xhr.addEventListener('loadend', handleEvent);
// 一个操作正在进行中
xhr.addEventListener('progress', handleEvent);
// 请求遇到错误时会被触发
xhr.addEventListener('error', handleEvent);
// 当一个请求终止时 `abort` 事件被触发
xhr.addEventListener('abort', handleEvent);
// 当一个请求超时时，将被触发
xhr.addEventListener('timeout', handleEvent);