XMLHttpRequest(XHR)对象用于与服务器交互。XMLHttpRequest 是 Ajax 技术的核心,通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。
XMLHttpRequest 可以用于获取任何类型的数据,而不仅仅是 XML。它甚至支持 HTTP 以外的协议(包括 file:// 和 FTP),尽管可能受到更多出于安全等原因的限制。
数值,只读属性,表示请求的状态码,具体值如下表
值
|
状态
|
描述
|
0
|
UNSENT
|
表示对象被创建,但尚未调用
open()
方法
|
1
|
OPENED
|
表示
open()
方法已经被调用
|
2
|
HEADERS_RECEIVED
|
表示
send()
方法已被调用,并且头部和状态已经可以获得
|
3
|
LOADING
|
表示数据接收中,
responseText
属性已经包含部分数据
|
4
|
DONE
|
表示数据接收已经完成
|
可写
属性,期望得到一个函数,用作
readystatechange
事件的处理方法。当
readyState
属性的值发生变化时,该函数会被调用。
注 1:
该方法不应用于同步的 XMLHttpRequest 请求。
注 2:
当 XMLHttpRequest 的请求被
abort()
方法取消时,
readystate
会被设置为 0,此时对应的
readystatechange
事件不会被触发。
字符串,只读属性,用于设置请求的响应体类型,期望值如下表。
值
|
描述
|
空字符串
|
相当于默认的 text
|
text
|
期望请求的响应体返回一个字符串
|
josn
|
期望请求的响应体返回一个将接收到的数据内容解析为 JSON 而创建的 JavaScript 对象
|
arraybuffer
|
期望请求的响应体返回一个包含二进制数据的 JavaScript ArrayBuffer
|
blob
|
期望请求的响应体返回一个包含二进制数据的 Blob 对象
|
document
|
期望请求的响应体返回一个 HTML Document 或 XML XMLDocument,具体类型根据接收到数据的 MIME 类型而定
|
注 1:
responseType
需在
open()
方法调用之后且
send()
方法调用之前设置
。
注 2:
同步的 XMLHttpRequest 请求不可修改
responseType
的值。
注 3:
服务端实际发送的响应体类型与
responseType
设置的类型不符时,请求体将为 null 。
只读属性,表示请求的响应体,其值的类型由
responseType
属性决定。
注:
responseType
的值为空字符串或
'text'
情况下,当
readyState
属性的值为 3 时即可通过
response
属性读取该请求目前为止已经取得的数据。其他情况下,未完成或未成功的请求,
response
都为
null
。
字符串,只读属性,表示请求发送后服务端返回的文本。
注 1:
send()
方法未调用时,
responseText
为空字符串;请求失败时,
responseText
为
null
。
注 2:
同
response
属性一样,当
readyState
属性的值为 3 时
responseText
返回目前为止服务端响应的文本内容,当
readyState
为 4 且
status
属性为 200 时,
responseText
返回后端响应的全部数据。
数值,只读属性,返回服务端响应的数字状态码。
注 1:
请求完成前或 XMLHttpRequest 出错时,
status
的值为 0 。
注 2:
如果服务响应中没有明确指定 status 码,则默认为 200。
字符串,只读属性,返回服务端响应状态码对应的文本信息。
注 1:
如果
readyState
的值为 0 或者 1,则这个
statusText
返回空字符串。
注 2:
如果服务响应中没有明确指定,则默认为 OK。
可写
属性,期望得到一个正整数,表示请求的最大毫秒数,超时后请求将自动终止,并触发超时事件。
注 1:
默认值为 0,表示无超时时间。
注 2:
在IE中,超时属性可能只能在调用
open()
方法之后且在调用
send()
方法之前设置。
可写
属性,期望得到函数,用作请求超时事件的处理函数。
注:
只有设置了
timeout
属性才可能发生超时事件 。
只读属性,返回一个
XMLHttpRequestUpload
对象,用来表示上传的进度,可以通过对其绑定事件来追踪它的进度。
可以为
upload
属性绑定以下事件,触发顺序由上至下。
注:
IE 10 以下是不支持。
事件
|
描述
|
onloadstart
|
上传开始时触发
|
onprogress
|
数据传输中周期性触发,该事件中可获取上传进度
|
onabort
|
上传终止时触发,通过
xhr.abort()
方法可终止上传。
|
onerror
|
上传失败时触发
|
onload
|
上传成功时触发
|
ontimeout
|
上传超时时触发,同请求超时,但是先于请求超时触发
|
onloadend
|
上传结束时触发,无论成功与否
|
注:
调用 xhr.abort() 方法终止上传后会依次触发
xhr.onreadystatechange
、
xhr.upload.onabort
、
xhr.upload.onloadend
、
xhr.onabort
、
xhr.onloadend
事件
示例代码
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (e) => {
if (e.total > 0) {
console.log(parseInt((e.loaded / e.total) * 100, 10));
xhr.upload.onloadstart = (e) => {
console.log("上传开始", e);
xhr.upload.onabort = (e) => {
console.log("上传终止", e);
xhr.upload.onerror = (e) => {
console.log("上传失败", e);
xhr.upload.onload = (e) => {
console.log("上传成功", e);
xhr.upload.ontimeout = (e) => {
console.log("上传超时", e);
xhr.upload.onloadend = (e) => {
console.log("上传结束", e);
xhr.ontimeout = (e) => {
console.log("请求超时", e);
xhr.open("post", "http://127.0.0.1:8888/test");
xhr.send(formData);
可写
属性,布尔值,用来指定跨域 Access-Control 请求是否应当带有授权信息,如 cookie 或授权 header 头。
说明
:用于初始化一个 http 请求。
已经调用过该方法的
xhr
对象再次调用该方法时,相当于调用
abort()
方法
。
参数
:
(method, url[, async[, name[, password]]])
-
method
字符串,表示要使用的 HTTP 方法,如
GET
、
POST
等。对于非 HTTP(S) URL,该参数会被忽略。
-
url
字符串,表示要向其发送请求的 URL。
-
async
布尔值,可选,表示是否异步发送请求,默认值为 true。值为 false 时,send() 方法将阻塞,直至请求结束。
-
user
可选,表示用户名,用于认证,默认为null。
-
password
可选,表示密码,用于认证,默认为null。
说明
:用于发送 HTTP 请求。请求方式为
GET
或
HEAD
时,参数应为
null
.
参数
:
(body)
-
body
可选,默认为
null
,类型可以是
Document
、
Blob
、
ArrayBufferView
、
FormData
,
URLSearchParams
, 或者字符串。
说明
:立即终止已经发送的请求。当一个请求被终止,它的 readyState 将被置为 0(此时并不会触发
onreadystatechange
事件),并且请求的 status 也置为 0。
注
:调用
abort()
方法后,
xhr
对象上会依次触发以下事件:
readystatechange
(此时
readyState
为 4)、
abort
(此时
readyState
为 0)和
loadend
。
说明
:覆写由服务端返回的 MIME 类型,该方法较少使用到。
参数
:
(mimeType)
-
mimeType
字符串,指定具体的 MIME 类型去代替服务器指定的MIME类型,如果服务器没有指定类型,那么 XMLHttpRequest 将会默认为
"text/xml"
。
场景举例
:强制使流方式处理响应类型为
"text/xml"
类型的数据。
以下事件皆可通过
xhr.addEventListener('eventName', handleFun)
或相应的事件属性(
no*
)绑定事件的回调。
事件名称
|
触发时机
|
说明
|
readystatechange
|
当
readyState
属性的值发生变化时触发
|
abort()
方法会将
readyState
设置为 0,但这一变化并不触发
readystatechange
事件
|
abort
|
当请求被停止时触发,如调用
abort()
方法之后
|
-
|
error
|
当请求出错时触发
|
只有在网络层级出现错误时(如无网络)才会触发。如果错误只出现在应用层(如发送一个HTTP的错误码),将不会触发该事件
。
|
load
|
当请求成功完成时触发
|
load
与
error
是相对立的事件,
error
不触发,
load
就会触发
|
loadstart
|
当请求接收到响应数据时触发
|
该事件也适用于
<img>
和
<video>
元素;
先于
readyState
变为 3 时的
readystatechange
触发
|
loadend
|
当请求结束时触发
|
无论请求成功 ( load) 还是失败 (abort 或 error)
|
progress
|
当请求接收到更多数据时,周期性地触发
|
-
|
timeout
|
当请求超时时触发
|
设置了
timeout
属性才有可能触发该事件
|
XMLHttpRequest(XHR)对象用于与服务器交互。XMLHttpRequest 是 Ajax 技术的核心,通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL,获取数据。本文主要介绍 XMLHttpRequest 对象的各种属性、方法及事件XMLHttpRequest 可以用于获取任何类型的数据,而不仅仅是 XML。它甚至支持 HTTP 以外的协议(包括 file:// 和 FTP),尽管可能受到更多出于安全等原因的限制。
utl.js 代码如下:function createXmlTree(node, indent) { if (node == null) return “”; var str = “”; switch (node.nodeType) { case 1: // Element str += “<div u00a0class=’element’><<span u00a0class=’elementname’>” + node.nodeName + “</span>”; var attrs = node.att
文章目录介绍基本用法常用方法1. Promise.prototype.then()2. Promise.prototype.catch()3. Promise.prototype.finally()4. Promise.all() 和 Promise.race()5. Promise.resolve() 和 Promise.reject()案例分析
Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一
XHR——
XMLHttpRequest
对象
创建
XMLHttpRequest
对象
与之前众多DOM操作一样,创建XHR
对象
也具有兼容性问题:IE6及之前的版本使用ActiveXObject,IE7之后及其它浏览器使用
XMLHttpRequest
不但IE6及其之前的版本将XHR作为一个ActiveXObject运行,而且还存在众多版本:一开始是Microsoft.XMLHTTP 之后变成...
一、新版本的
XMLHttpRequest
对象
,传送数据的时候,有一个progress事件,用来返回进度信息。
它分成上传和下载两种情况
1)下载的progress事件属于
XMLHttpRequest
对象
2)上传的progress事件属于
XMLHttpRequest
.upload
对象
。
先定义progress事件的回调函数。
xhr.onprogress = updatePro...
概念创建
XMLHttpRequest
对象
建立连接发送get请求发送post请求异步响应状态readyState终止请求abort()获取XML数据获取和设置头部信息
XMLHttpRequest
对象
,顾名思义:是基于XML的HTTP请求,是一个浏览器接口,
XMLHttpRequest
用于在后台与
服务器
交换数据。
我们通过
XMLHttpRequest
可以在不刷新页面的情况下请求特定 URL获取数据。
创建
XMLHttpRequest
对象
var xhr = new
XMLHttpRequest
().
新建 Spring Starter Project,编辑 pom.xml 文件,引入依赖:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org
今天调试首页,Companion.js 提示,countdown 为空或不是
对象
。
我检查了一下
javascript
代码,发现没有什么问题。是不是 include 了其它页面有相同的名字的 HTML Tag 呢?于是我把 countdown 名字改成 cdown,结果还是提示错误。
忽然想起调试方法:alert();于是将以下代
XMLHttpRequest
()是一个构建HTTP请求的
JavaScript
对象
(即构造器)。
XMLHttpRequest
()
对象
的用法,主要分为两个有效步骤:
* 发送请求;
* 处理响应