XMLHttpRequest
XMLHttpRequest(XHR)对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。XMLHttpRequest在AJAX编程中被大量使用。
XMLHttpRequest()
- 初始化一个新的XMLHttpRequest对象
const request = new XMLHttpRequest();//生成一个新的对象
- 返回值:该对象必须至少通过调用open()对其进行初始化,然后再调用send()将请求发送到服务器。
withCredentials
- 布尔值,默认为false,指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制(cross-site Access-Control)请求。在同源请求是无效的。
- 也会被用做响应中cookies 被忽视的标示。默认值是false。
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
onerror
- 是XMLHttpRequest是由于错误而失败时调用的函数。
XMLHttpRequest.onerror = callback;//callback是请求失败时执行的函数
var xhr = new XMLHttpRequest();
xhr.onerror = ()=> {
onError('请求失败') //执行自己用来处理失败
};
onload
- 是XMLHttpRequest是请求成功时调用的函数。
XMLHttpRequest.onerror = callback;//callback是请求失败时执行的函数
var xhr = new XMLHttpRequest();
xhr.onload = () => {
// allow success when 2xx status
// see https://github.com/react-component/upload/issues/34
if (xhr.status < 200 || xhr.status >= 300) {//非2xx区间状态值走失败
return onError(new Error(xhr.statusText));//自定义失败
}
let result;
try {
// 处理取回的数据(在 xhr.response 中找到)
result = JSON.parse(xhr.responseText || xhr.response);
} catch {}
onSuccess(result);//自定义成功
};
xhr.statusText
- 有四种状态码,这个属性包含了返回状态对应的文本信息,例如"OK"或是"Not Found"。
- xhr.status //200或0
xhr.responseText
- 只读XMLHttpRequest属性responseText返回在发送请求之后从服务器接收到的文本。
xhr.onload = function () {
if (xhr.readyState === xhr.DONE) {
if (xhr.status === 200) {
console.log(xhr.response);
console.log(xhr.responseText);
result = JSON.parse(xhr.responseText || xhr.response);//简写接受结果为该写法
onSuccess(result);//调用自定义成功方法
}
}
};
xhr.open
- XMLHttpRequest.open() 方法初始化一个请求
xhrReq.open(method, url, async);//前两个参数不解释,第三个参数为布尔值
- 一个可选的布尔参数,表示是否异步执行操作,默认为true。如果值为false,send()方法直到收到答复前不会返回。如果true,已完成事务的通知可供事件监听器使用。如果multipart属性为true则这个必须为true,否则将引发异常。
xhr.send
- 方法用于发送 HTTP 请求。如果是异步请求(默认为异步请求),则此方法会在请求发送后立即返回;如果是同步请求,则此方法直到响应到达后才会返回。XMLHttpRequest.send() 方法接受一个可选的参数,其作为请求主体;如果请求方法是 GET 或者 HEAD,则应将请求主体设置为 null。
xhrReq.open(method, url, async);//前两个参数不解释,第三个参数为布尔值
- body可选
在XHR请求中要发送的数据体. 可以是:- 可以为Document, 在这种情况下,它在发送之前被序列化.
- 为 XMLHttpRequestBodyInit, 从 per the Fetch spec (规范中)可以是Blob,BufferSource(en-US),FormData,URLSearchParams, 或者 USVString 对象.
- null
如果body没有指定值,则默认值为 null .
FormData
- 接口提供了一种表单数据的键值对 key/value 的构造方式,并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去,如果送出时的编码类型被设为 “multipart/form-data”,它会使用和表单一样的格式。
- 常用方法:FormData.append()
- FormData.set和 append() 的区别在于,如果指定的键已经存在, FormData.set会使用新值覆盖已有的值,而 append()会把新值添加到已有值集合的后面。
const formData = new FormData();
formData.append('OSSAccessKeyId', token.accessid);
formData.append('policy', token.policy);
formData.append('Signature', token.signature);
formData.append('key', pathName);
// 成功后的状态码,默认是 204
formData.append('success_action_status', '200');
formData.append('file', file);
xhr.setRequestHeader
- xhr.setRequestHeader()是设置HTTP请求头部的方法。此方法必须在 open()方法和send() 之间调用。如果多次对同一个请求头赋值,只会生成一个合并了多个值的请求头。
myReq.setRequestHeader(header, value);//正常使用
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
if (headers) {
Object.entries(headers).forEach(([key, value]) => {
xhr.setRequestHeader(key, String(value));
});
}
Object.entries()返回一个数组,其元素是与直接在object上找到的可枚举属性键值对相对应的数组。
eg:
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
xhr.abort
- XMLHttpRequest.open() 方法初始化一个请求
var xhr = new XMLHttpRequest(),
method = "GET",
url = "https://developer.mozilla.org/";
xhr.open(method, url, true);
xhr.send();
if (OH_NOES_WE_NEED_TO_CANCEL_RIGHT_NOW_OR_ELSE) {
xhr.abort();
}
- 如果该请求已被发出,XMLHttpRequest.abort()方法将终止该请求。当一个请求被终止,它的 readyState 将被置为XMLHttpRequest.UNSENT(0),并且请求的status置为 0。