XMLHttpRequest
本身是一个构造函数
let xhr = new XMLHttpRequest();复制代码
一旦建立实例就可以使用open()
方法发出 HTTP 请求。
xhr.open('GET','http://www.example.com/page.php', true);复制代码
然后指定回调函数,监听通信状态(readyState
属性)的变化。
xhr.onreadyStatechange = handleStateChange;function handleStateChange(){ //...}复制代码
注意,AJAX 只能向同源网址(协议、域名、端口都相同)发出 HTTP 请求,如果发出跨域请求,就会报错.
下面是 XMLHttpRequest
对象的简单用法的完整例子
let xhr = new XMLHttpRequest();xhr.onreadyStatechange = function(){ //通信成功时,状态值为4 if(xhr.readyState === 4){ if(xhr.status === 200){ console.log(xhr.responseText); }else{ console.error(xhr.statusText); } }};xhr.onerror = function(e){ console.error(xhr.statusText);};xhr.open('GET','/endpoint',true);xhr.send(null);复制代码
一、XMLHttpRequest 的实例属性
XMLHttpRequest.readyState
XMLHttpRequest.readyState
返回一个整数,表示实例对象的当前状态。该属性只读。它可能返回以下值。
-
0,表示 XMLHttpRequest 实例已经生成,但是实例的
open()
方法还没有被调用。 -
1,表示
open()
方法已经调用,但是实例的send()
方法还没有调用,仍然可以使用实例的setRequestHeader()
方法,设定 HTTP 请求的头信息。 -
2,表示实例的
send()
方法已经调用,并且服务器返回的头信息和状态码已经收到。 -
3,表示正在接收服务器传来的数据体(body 部分)。这时,如果实例的
responseType
属性等于text
或者空字符串,responseText
属性就会包含已经收到的部分信息。 -
4,表示服务器返回的数据已经完全接收,或者本次接收已经失败。
XMLHttpRequest.onreadystatechange
属性指向一个监听函数。readystatechange
事件发生时(实例的readyState
属性变化),就会执行这个属性。
XMLHttpRequest.response
表示服务器返回的数据体(即 HTTP 回应的 body 部分)。它可能是任何数据类型,比如字符串、对象、二进制对象等等,具体的类型由XMLHttpRequest.responseType
属性决定。该属性只读。
XMLHttpRequest.responseType
属性是一个字符串,表示服务器返回数据的类型
XMLHttpRequest.responseText
属性返回从服务器接收到的字符串,该属性为只读。
XMLHttpRequest.responseXML
属性返回从服务器接收到的 HTML 或 XML 文档对象,该属性为只读。
XMLHttpRequest.responseURL
属性是字符串,表示发送数据的服务器的网址。
XMLHttpRequest.status,XMLHttpRequest.statusText
XMLHttpRequest.status
属性返回一个整数,表示服务器回应的 HTTP 状态码。一般来说,如果通信成功的话,这个状态码是200;如果服务器没有返回状态码,那么这个属性默认是200。请求发出之前,该属性为0。该属性只读。
-
200, OK,访问正常
-
301, Moved Permanently,永久移动
-
302, Moved temporarily,暂时移动
-
304, Not Modified,未修改
-
307, Temporary Redirect,暂时重定向
-
401, Unauthorized,未授权
-
403, Forbidden,禁止访问
-
404, Not Found,未发现指定网址
-
500, Internal Server Error,服务器发生错误
XMLHttpRequest.timeout,XMLHttpRequestEventTarget.ontimeout
XMLHttpRequest.timeout
属性返回一个整数,表示多少毫秒后,如果请求仍然没有得到结果,就会自动终止。如果该属性等于0,就表示没有时间限制。
XMLHttpRequestEventTarget.ontimeout
属性用于设置一个监听函数,如果发生 timeout 事件,就会执行这个监听函数。
XMLHttpRequest.withCredentials
XMLHttpRequest.withCredentials
属性是一个布尔值,表示跨域请求时,用户信息(比如 Cookie 和认证的 HTTP 头信息)是否会包含在请求之中,默认为false,即向example.com发出跨域请求时,不会发送example.com设置在本机上的 Cookie(如果有的话)。
XMLHttpRequest.upload
不仅可以发送请求,还可以发送文件,这就是 AJAX 文件上次。发送文件后,通过该属性可以得到一个对象,通过观察这个对象,可以得知上传的进展,主要方法就是监听这个对象的各种事件:loadstart、loadend、load、abort、error、progress、timeout。
二、XMLHttpRequest 的实例方法
XMLHttpRequest.open()
它一共可以接受五个参数。
void open( string method, string url, optional boolean async, optional string user, optional string password);复制代码
-
method
:表示 HTTP 动词方法,比如GET
、POST
、PUT
、DELETE
、HEAD
等。 -
url
: 表示请求发送目标 URL。 -
async
: 布尔值,表示请求是否为异步,默认为true。如果设为false,则send()方法只有等到收到服务器返回了结果,才会进行下一步操作。该参数可选。由于同步 AJAX 请求会造成浏览器失去响应,许多浏览器已经禁止在主线程使用,只允许 Worker 里面使用。所以,这个参数轻易不应该设为false。 -
user
:表示用于认证的用户名,默认为空字符串。该参数可选。 -
password
:表示用于认证的密码,默认为空字符串。该参数可选。
XMLHttpRequest.send()
方法用于实际发出 HTTP 请求。它的参数是可选的,如果不带参数,就表示 HTTP 请求只有一个 URL,没有数据体,典型例子就是 GET 请求;如果带有参数,就表示除了头信息,还带有包含具体数据的信息体,典型例子就是 POST 请求。
下面是发送 POST 请求的例子。
var xhr = new XMLHttpRequest();var data = 'email=' + encodeURIComponent(email) + '&password=' + encodeURIComponent(password);xhr.open('POST', 'http://www.example.com', true);xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');xhr.send(data);复制代码
注意,所有 XMLHttpRequest 的监听事件,都必须在send()方法调用之前设定。
XMLHttpRequest.setRequestHeader()
用于设置浏览器发送的 HTTP 请求的头信息。方法必须在open()
之后,send()
之前调用。
该方法接受两个参数。第一个参数是字符串,表示头信息的字段名,第二个参数是字段值。
xhr.setRequestHeader('Content-Type', 'application/json');xhr.setRequestHeader('Content-Length', JSON.stringify(data).length);xhr.send(JSON.stringify(data));复制代码
XMLHttpRequest.overrideMimeType()
方法用来指定 MIME
类型,覆盖服务器返回的真正的 MIME
类型,从而让浏览器进行不一样的处理。举例来说,服务器返回的数据类型是text/xml
,由于种种原因浏览器解析不成功报错,这时就拿不到数据了。为了拿到原始数据,我们可以把 MIME
类型改成text/plain
,这样浏览器就不会去自动解析,从而我们就可以拿到原始文本了。
注意,该方法必须在send()方法之前调用。
XMLHttpRequest.getResponseHeader()
方法返回 HTTP 头信息指定字段的值,如果还没有收到服务器回应或者指定字段不存在,返回null。该方法的参数不区分大小写。
XMLHttpRequest.getAllResponseHeaders()
方法返回一个字符串,表示服务器发来的所有 HTTP 头信息。
XMLHttpRequest.abort()
方法用来终止已经发出的 HTTP 请求。调用这个方法以后,readyState
属性变为4
,status
属性变为0
三、XMLHttpRequest 实例的事件
readyStateChange 事件
这个上面说过了
progress 事件
上传文件时,XMLHttpRequest 实例对象本身和实例的upload
属性,都有一个progress
事件,会不断返回上传的进度。