XHR对象

一、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的状态码,表示服务器返回是正常状态。

200,OK,访问正常
301,Moved Permanently,永久移动
302,Move temporarily,暂时移动
304,Not Modified,未修改
307,Temporary Redirect,暂时重定向
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,并以\r\n结束。
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事件进度对象。

时间: 2024-10-02 23:38:13

XHR对象的相关文章

Ajax原生XHR对象

前端学了有一段时间了,在项目中我通常使用的都是jQuery封装好的Ajax函数($.ajax.$.get.$.post),使用非常的简单方便,但为了更清楚的了解Ajax,需要学习原生xhr对象. 先来明确什么是Ajax,Ajax:"Asynchronous JavaScript and XML",翻译过来就是异步JavaScript和XML. Ajax是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新.意味这可以再不重新加载整个网页的情

封装通用的xhr对象,兼容各个版本

// 封装通用的xhr对象,兼容各个版本 function createXHR(){ //判断浏览器是否将XMLHttpRequest作为本地对象实现,针对IE7,火狐,欧朋等 if(typeof XMLHttpRequest != "undefined"){ return new XMLHttpRequest(); }else if(typeof ActiveXObject != "undefined"){ // 将有可能出现的ActiveXObject版本放在一

XHR对象的进度事件

首先要明确的是对事件的监听方法是在 on + 事件名,比如load事件,load事件的监听方法就是onload 言归正传,Progress Events规范是W3C的一个草案,定义了与客户端服务器通信有关的事件.有如下7个进度事件: abort:在因为调用abort()方法而终止连接时触发. error:在请求发生错误时触发. load: 在接收到完整的响应数据时触发. loadend: 在通信完成或者触发error.abort.或load事件后触发. loadstart:在接收到响应数据的第一

XHR 对象实例所有的配置、属性、方法、回调和不可变值

当我们声明了一个XMLHttpRequest对象的实例的时候,使用for-in来循环遍历一下这个实例(本文使用的是chrome45版本浏览器),我们会发现在这个实例上绑定了一些内容,我把这些内容进行了一下分类: 一.配置项 也就是对xhr对象进行配置.① timeout : 配置请求超时时间.② withCredentials:是否携带发送提供凭据,在下面会进行详细的说明. 二.属性项 也就是指一些请求发送或完成过程中可能会被用户读取或使用到的一些值.① readyState:xhr的状态码.②

创建兼容的XHR对象

1 function createXHR () {//创建XMLHttpRequest对象 2 var xhr=null; 3 if(window.XMLHttpRequest){ 4 createXHR=createStandardXHR; // Firefox, Opera 8.0+,Safari,IE7+ 5 } 6 else{ 7 createXHR=createCompatibleXHR; // IE5.IE6 8 } 9 10 try{ 11 xhr=createXHR(); 12

转:AJAX中xhr对象详解

XJAX ,并不是一种新技术的诞生.它实际上代表的是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用. 它包括: 使用XHTML和CSS标准化呈现: 使用DOM实现动态显示和交互: 使用XML和XSLT进行数据交换与处理: 使用XMLHttpR XJAX ,并不是一种新技术的诞生.它实际上代表的是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用. 它包括: 使用XHTML和CSS标准化呈现: 使用DOM实现动态显示和交互: 使用XML和XSLT进行数据交换与处理: 使用XMLHt

关于XHR对象中status范围的记录

if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ // 成功执行区域 // 2XX表示有效响应 // 304意味着是从缓存读取 } 这是刚刚看书所得,自己看到这段的时候,突然精神一振,精神抖擞,激动无比: 比我看到一个美女向我扑来都开心(哈哈): 不断的进步是一条非常有意思的一条路,个中滋味只有走过的人才有深深的体会: 记得最开始的时候自己写ajax时,根本就不管success返回的是什么,管他正确不

XHR的对象及用法

function  createXHR(){         //检测原生XHR对象是否存在,如果存在刚返回它的新实例:     //如果不存在,则检测ActiveX对象;     //如果两个都不存在,就抛出一个错误.         if(typeof XMLHttpRequest != "undefined"){         return new XMLHttpRequest();     }else if(typeof ActiveXObject != "unde

XHR——XMLHttpRequest对象

创建XMLHttpRequest对象 与之前众多DOM操作一样,创建XHR对象也具有兼容性问题:IE6及之前的版本使用ActiveXObject,IE7之后及其它浏览器使用XMLHttpRequest 不但IE6及其之前的版本将XHR作为一个ActiveXObject运行,而且还存在众多版本:一开始是Microsoft.XMLHTTP 之后变成Msxml2.XMLHTTP及更新版的Msxml3.XMLHTTP function XHR() { var xhr; try {xhr = new XM