XMLHttpRequest level2

lowett 发布于2019-08-20 12:18 / 2683人阅读

摘要：使用此事件就没必要再通过检查来确认响应完成了。不过事件只是表示接收到服务器的响应，还需要通过来判断响应是否成功。

HTML5 更新了很多API，XMLHttpRequest 就是其中一个。level 2 的XMLHttpRequest 更加强大了。

新建对象

var xhr = new XMLHttpRequst()
和之前一样

属性

先看老几样属性
onreadystatechange 同步ajax不可用此事件回调，abort() 也不会触发此事件，open() 之前设置
readyState 只读
responseText 只读
responseXML
responseURL
status
statusText

新属性
responseType 设置响应类型，可以是 arraybuffer / blob / document / json / text ，默认是 text
response 响应内容
timeout 超时毫秒数，同步请求不可用。默认是0，永不超时。在 open() 和 send() 之间设置，超时会触发 xhr 的 timeout 事件
upload 只读，ajax 上传对象，后面详细讲
withCredentials Boolean，是否允许跨域响应设置cookie，默认是 false

方法

abort() 触发 abort 事件

getAllResponseHeaders() 返回所有响应头部组成的字符串

getResponseHeader(key)

open(method, url)

overrideMimeType(mimetype) 重写响应类型，如果需要的话，在 send() 之前调用

send() 可以发送 FormData / Blob / Buffer / String / Document，不发送数据的话，建议使用 xhr.send(null)

setRequestHeader(key, value) 设置请求头，在 open() 和 send() 之间调用。如果没有设置 Accept，则默认是 */*

事件

loadstart send() 之后触发，只触发一次
progress 进度事件，会不断被触发

xhr.addEventListener("progress", ev => {
  if (ev.lengthComputable) {
    console.log(ev.loaded / ev.total);
  }
});

ev.lengthComputable 长度可计算
ev.loaded 接收的字节数
ev.total 总字节数

// 可以使用 "onprogress" in xhr 判断浏览器是否支持 progress 事件

load 响应完成时触发。使用此事件就没必要再通过检查 xhr.readyState === 4 来确认响应完成了。不过 load 事件只是表示接收到服务器的响应，还需要通过 xhr.status 来判断响应是否成功。
error
abort xhr.abort() 触发
timeout 设置 xhr.timeout 之后，响应超时时触发

upload

xhr.upload 是 ajax 上传对象
xhr.upload 也有以下事件
progress
load
error
abort
xhr.upload.onprogress 和 xhr.onprogress 使用差不多，只是一个针对文件上传过程，一个针对从服务器获取响应的过程

FormData

表单数据类型

var form = new FormData();
form.append("username", "xiaoming");

或者
var form = new FormData(document.getElementsByTagName("form")[0]);

// 使用 FormData，不用设置请求的 Content-Type，xhr 能够自动识别并设置
// 如果不使用 FormData，发送表单需要先设置 Content-Type 为 `application/x-www-form-urlencoded`, 如果表单中有文件需要上传，则 Content-Type 为 `multipart/form-data`
xhr.send(form);

// 如果只是上传文件，可以直接使用 `xhr.send(file)`

综上所述，使用 ajax 时，步骤如下：

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {}; level2 几乎可以不用了

xhr.open();

xhr 的相关设置，比如事件监听，请求头设置，响应头改写等

xhr.send();

GPU云服务器云服务器 level2 XMLHttpRequest level2数据 XMLHttpRequest介绍

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80896.html

聊聊Ajax那些事

摘要：年初，许多事件使得被大众所接受。这使得应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。调用方法后立即触发，若未被调用则不会触发此事件。了解Ajax的起源、概念及特点起源该技术在1998年前后得到了应用。允许客户端脚本发送HTTP请求（XMLHTTP）的第一个组件由Outlook Web Access小组写成。该组...

v1 2019-08-29 11:08 评论0 收藏0
聊聊Ajax那些事

摘要：年初，许多事件使得被大众所接受。这使得应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。调用方法后立即触发，若未被调用则不会触发此事件。了解Ajax的起源、概念及特点起源该技术在1998年前后得到了应用。允许客户端脚本发送HTTP请求（XMLHTTP）的第一个组件由Outlook Web Access小组写成。该组...

xzavier 2019-08-01 15:38 评论0 收藏0
聊聊Ajax那些事

摘要：年初，许多事件使得被大众所接受。这使得应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。调用方法后立即触发，若未被调用则不会触发此事件。了解Ajax的起源、概念及特点起源该技术在1998年前后得到了应用。允许客户端脚本发送HTTP请求（XMLHTTP）的第一个组件由Outlook Web Access小组写成。该组...

BigTomato 2019-08-20 10:23 评论0 收藏0
前端面试之htm5新特性

摘要：今天来谈谈前端面试中基本上每次一面的时候都会被问到的一个问题，那就是的新特性。新表单元素元素，表示电话号码。和通过设置和特性，可以将输入框的数值输入范围限定在最低值和最高值之间。一旦为某输入型控件设置了特性，那么此项必填，否则无法提交表单。今天来谈谈前端面试中基本上每次一面的时候都会被问到的一个问题，那就是html5的新特性。这个是学习前端必须掌握的基础知识。新增的元素 html5...

teren 2019-08-01 17:07 评论0 收藏0