一、XMLHttpRequest对象
var xhr = new XMLHttpRequest(), i = 0; for(var key in xhr){ if(xhr.hasOwnProperty(key)){ i++; } } console.log(i); //0 console.log(XMLHttpRequest.prototype.hasOwnProperty('timeout')); //true
会发现XMLHttpRequest实例对象没有自身属性,实际上,它的所有属性均来自于XMLHttpRequest.prototype。
追根溯源
xhr => XMLHttpRequest.prototype => XMLHttpRequestEventTarget.prototype => EventTarget.prototype => Object.prototype
二、XMLHttpRequest实例的属性
1、readyState
只读,readyState记录了ajax调用过程中所有可能的状态,表示XMLHttpRequest请求当前所处的状态。
0表示未初始化,请求已建立;
1表示初始化,请求已建立,但未发送;
2表示发送数据,请求已发送;
3表示数据传送中,请求处理中,响应的数据还不够齐全;
4表示完成,数据接收完毕。
2、response
只读,表示服务器的响应内容。
3、responseType
表示服务器返回数据的类型,缺省为空字符串,可取 "arraybuffer","blob","document","json","text" 共五种类型。
4、responseText
只读,表示服务器响应内容的文本形式。
5、responseXML
只读, responseXML表示xml形式的响应数据, 缺省为null, 若数据不是有效的xml, 则会报错.
6、status
只读,status表示本次请求所得到的HTTP状态码,初始值为0。如果服务器没有显式地指定状态码,那么status将被设置为默认值,即200。基本上,只有2xx和304的状态码,表示服务器返回是正常状态。
1** 消息;2** 成功;3** 重定向; 4** 请求错误; 5** 服务器错误。
200,OK,访问正常 301,Moved Permanently,永久移动 302,Move temporarily,暂时移动 304,Not Modified,未修改 305,请求的资源必须通过指定的代理才能被访问 307,Temporary Redirect,暂时重定向 400,语义有误,当前请求无法被服务器理解 401,Unauthorized,未授权 403,Forbidden,禁止访问,服务器已经理解请求,但是拒绝执行它。 404,Not Found,未发现指定网址,请求失败,在服务器上面没有找到请求的资源。 500,Internal Server Error,服务器代码错误
7、statusText
只读,statusText表示服务器发送的状态提示,包含整个状态信息,比如"200 OK"。
8、timeout
用于指定ajax的超时时长,表示多少毫秒后,如果请求仍然没有得到结果,就会自动终止。如果该属性等于0,就表示没有时间限制。
9、responseURL
responseURL返回ajax请求最终的URL,如果请求中存在重定向,那么responseURL表示重定向之后的URL。
10、withCredentials
withCredentials是一个布尔值,默认为false,表示跨域请求中不发送cookies等信息。当它设置为true时,cookies,authorization headers 或者TLS客户端证书都可以正常发送和接收。显然,它的值对同域请求没有影响,该属性适用于IE10+,opera12+及其他现代浏览器。
xhr.withCredentials = true;
服务器必须显示返回Access-Control-Allow-Credentials这个头信息。
Access-Control-Allow-Credentials: true
11、upload
属性默认返回一个XMLHttpRequestUpload对象,用于上传资源,该对象具有如下方法:
onloadstart
onprogress
onabort
onerror
onload
ontimeout
onloadend
三、XMLHttpRequest实例的方法
1、getResponseHeader()
getResponseHeader方法用于获取ajax响应头中指定字段的值,如果response headers中存在相同的字段,那么它们的值将自动以字符串的形式连接在一起。
2、getAllResponseHeaders()
getAllResponseHeaders方法用于获取所有安全的ajax响应头,响应头以字符串形式返回。每个HTTP报头名称和值用冒号分隔,如key:value,并以
结束。
3、open()
open方法用于指定发送HTTP请求的参数,它的使用格式如下,一共可以接受五个参数。
void open( string method, //表示HTTP动词,比如“GET”、“POST”、“PUT”和“DELETE”。 string url, //表示请求发送的网址。 optional boolean async, //格式为布尔值,默认为true,表示请求是否为异步。 optional string user, //表示用于认证的用户名,默认为空字符串。 optional string password //表示用于认证的密码,默认为空字符串。 );
4、send()
send方法用于实际发出HTTP请求。如果不带参数,就表示HTTP请求只包含头信息,也就是只有一个URL,典型例子就是GET请求;如果带有参数,就表示除了头信息,还带有包含具体数据的信息体,典型例子就是POST请求。
所有XMLHttpRequest的监听事件,都必须在send()方法调用之前设定。
5、setRequestHeader()
setRequestHeader方法用于设置HTTP头信息。该方法必须在open()之后、send()之前调用。如果该方法多次调用,设定同一个字段,则每一次调用的值会被合并成一个单一的值发送。
//指定请求的type为json格式 xhr.setRequestHeader("Content-type", "application/json"); //除此之外, 还可以设置其他的请求头 xhr.setRequestHeader('x-requested-with', '123456');
6、overrideMimeType()
overrideMimeType方法用于强制指定response的MIME类型,即强制修改response的Content-Type。
xhr.overrideMimeType("text/xml; charset = utf-8");
xhr.send();
四、XMLHttpRequest实例的事件
1、onreadystatechange事件
onreadystatechange事件回调方法在readystate状态改变时触发,默认会传入Event实例。在一个收到响应的ajax请求周期中,会触发4次onreadystatechange事件。
2、onloadstart事件
onloadstart事件回调方法在ajax请求发送之前触发,触发时机在readyState==1状态之后,readyState==2状态之前。onloadstart方法中默认将传入一个ProgressEvent事件进度对象。
3、onprogress事件
onprogress事件回调方法在readyState==3状态时开始触发,默认传入ProgressEvent对象。有兼容性问题,适用于IE10+及其他现代浏览器。
//跟踪上传进度 xhr.upload.onprogress = function(e){ var percent = 100 * e.loaded / e.total; console.log('upload: ' + precent + '%'); }
4、onerror事件
onerror事件回调方法在ajax请求出错后执行,通常只在网络出现问题时或者ERR_CONNECTION_RESET时触发(如果请求返回的是407状态码,chrome下也会触发onerror)。
5、onabort事件
用来终止已经发出的HTTP请求。取消后, readyState状态将被设置为0(UNSENT)。
6、onload事件
onload事件回调方法在ajax请求成功后(readyState==4状态后)触发。
7、onloadend事件
onloadend事件回调方法在ajax请求完成后(readyState==4状态后或者readyState==2状态后)触发,方法中默认传入一个ProgressEvent事件进度对象。