前端-前后端交互-XmlHttpRequest

scd_li
318 阅读3分钟
4.10.1 XMLHttpRequest
4.10.1.1 XMLHttpRequest属性
  • XMLHttpRequest.onreadystatechange 当readyState属性变化时触发
  • XMLHttpRequest.readyState(只读) 返回xhr代理处于的状态
值状态描述
0UNSENT代理被创建，但尚未调用 open() 方法。
1OPENEDopen() 方法已经被调用。
2HEADERS_RECEIVEDsend() 方法已经被调用，并且头部和状态已经可获得。
3LOADING下载中； responseText 属性已经包含部分数据。
4DONE下载操作已完成。
  • response(只读) 返回响应正文
  • responseText(只读) 返回全部后端返回的数据
  • responseType 一个枚举类型的属性，返回响应数据的类型
值描述
""responseType 为空字符串时，采用默认类型 DOMString，与设置为 text 相同
arraybufferresponse 是一个包含二进制数据的 JavaScript ArrayBuffer
blobresponse 是一个包含二进制数据的 Blob 对象
documentresponse 是一个 HTML Document 或 XML XMLDocument，这取决于接收到的数据的 MIME 类型。请参阅 XMLHttpRequest 中的 HTML 以了解使用 XHR 获取 HTML 内容的更多信息。
jsonesponse 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 JSON 解析得到的。
textresponse 是一个以 DOMString 对象表示的文本。
  • XMLHttpRequest.responseURL（只读）返回经过序列化（serialized）的响应 URL，如果该 URL 为空，则返回空字符串。
  • XMLHttpRequest.responseXML（只读）返回一个 Document，其中包含该请求的响应，如果请求未成功、尚未发送或时不能被解析为 XML 或 HTML，则返回 null。
  • XMLHttpRequest.status（只读）返回一个无符号短整型（unsigned short）数字，代表请求的响应状态。
  • XMLHttpRequest.statusText（只读）返回一个 DOMString，其中包含 HTTP 服务器返回的响应状态。与 XMLHTTPRequest.status 不同的是，它包含完整的响应状态文本（例如，"200 OK"）。
  • timeout 一个无符号长整型（unsigned long）数字，表示该请求的最大请求时间（毫秒），若超出该时间，请求会自动终止。
  • upload(只读) XMLHttpRequestUpload，代表上传进度。
  • withCredentials 一个布尔值 (en-US)，用来指定跨域 Access-Control 请求是否应当带有授权信息，如 cookie 或授权 header 头。
4.10.1.2 XMLHttpRequest方法
  • absort() 如果请求已被发出，则立刻中止请求
  • getAllResponseHeaders() 以字符串的形式返回所有用 CRLF 分隔的响应头，如果没有收到响应，则返回 null。
  • getResponseHeader() 返回包含指定响应头的字符串，如果响应尚未收到或响应中不存在该报头，则返回 null。
  • open() 初始化一个请求。该方法只能在 JavaScript 代码中使用，若要在 native code 中初始化请求，请使用 openRequest()。
  • overrideMimeType() 覆写由服务器返回的 MIME 类型。
  • send() 发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回。
  • setRequestHeader() 设置 HTTP 请求头的值。必须在 open() 之后、send() 之前调用 setRequestHeader() 方法。
4.10.1.3 XMLHttpRequest事件
  • abort/onabort 当 request 被停止时触发，例如当程序调用 XMLHttpRequest.abort() 时。
  • error/onerror 当 request 遭遇错误时触发。
  • load/onload XMLHttpRequest请求成功完成时触发。
  • loadend/loadend 当请求结束时触发, 无论请求成功 ( load) 还是失败 (abort 或 error)。
  • loadstart/onloadstart 接收到响应数据时触发。
  • progress/onprogress 当请求接收到更多数据时，周期性地触发。
  • timeout/ontimeout 在预设时间内没有接收到响应时触发。
4.10.1.2 创建XmlHttpRequest实例
let xhr;
function createXhr(){
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();//
    }else if(window.ActiveXObject){
        xhr = new ActiveXObject("Microsoft.XMLHTTP");//IE
    }
}
4.10.1.3 发送http、https实例
xhr.open("get",url,true);
xhr.onreadystatechange = function(){
    if(xhr.readyState === XMLHttpRequest.DNOE && xhr.status === 200){
        console.log(xhr.responseText);
    }
}
xhr.send
4.10.1.3 事件添加
//中止
xhr.onabort = function(e){
    
}
xhr.addEventListener("abort",function(e){
    
})
xhr.addEventListener("abort",handlerEvent)
function handlerEvent(e){
    
}
avatar
文章
阅读
粉丝