XHR在IE5中引入,所以在IE中可能会遇到三种不同的版本 'MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0','MSXML2.XMLHttp'
适用于IE7之前的版本的创建方式
//适用于IE7之前的版本 function createXHR() { if ( typeof arguments.callee.activeXString != "string" ) { var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0','MSXML2.XMLHttp'], i, len; for ( i = 0, len = versions.length; i < len; i++){ try{ new ActiveXObject( versions[i] ); arguments.callee.activeXString = versions[i]; break; }catch(ex){ } } } return new ActiveXObject( arguments.callee.activeXString ); }
IE7+、Firefox、Opera、Chrome and Safari 都支持原生XHR
//IE7+、Firefox、Opera、Chrome and Safari 都支持原生XHR var xhr = new XMLHttpRequest();所以兼容全部浏览器的方式是
//所以兼容全部浏览器的函数为 function createXHR() { if ( typeof XMLHttpRequest != "undefined" ) { return new XMLHttpRequest(); }else if ( typeof ActiveXObject != "undefined" ) { if ( typeof arguments.callee.activeXString != "string" ) { var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0','MSXML2.XMLHttp'], i, len; for ( i = 0, len = versions.length; i < len; i++){ try{ new ActiveXObject( versions[i] ); arguments.callee.activeXString = versions[i]; break; }catch(ex){ } } } return new ActiveXObject( arguments.callee.activeXString ); } else { throw new Error("No XHR object available."); } }
1.OPEN()
//1.open() @param type(请求类型) // url(请求URL-相对于当前页面,也可以用绝对路径) // isAsync(是否异步发送) //调用open方法不会真正发送请求,只是启动一个请求以备发送 xhr.open("get/post", "example.php", false);2.send()方法
@param body 请求的主体内容,如果没有,设为null
3.返回数据
responseText 作为响应主体被返回文本
responseXML 若响应类型为"text/xml"或"application/xml",这个属性将保存包含响应 数据的XML DOM文档
status 响应的HTTP状态
statusText HTTP状态的说明
5.异步发送检测状态
readyState
0 --未初始化,尚未调用open();
1 --启动,已经调用open(),但尚未调用send();
2 --发送,已经调用send(),但尚未接收到响应;
3 --接收,已经接收到部分数据;
4 --完成,已经接收到全部响应数据,可以在客户端使用;
必须在调用open()之前调用readystatechange事件
xhr.onreadystatechange = function() { if( xhr.readyState == 4 ) { } }6.取消请求
xhr.abort();
1.XHR默认请求头部
Accept: 浏览器能够处理的内容类型
Accept-Charset: 浏览器能够显示的字符集
Accept-Encoding: 浏览器能够处理的压缩编码
Accept-Language: 浏览器当前设置语言
Connection: 浏览器与服务器之间的链接类型
Cookie: 当前页面设置的任何Cookie
Host: 发送请求页面的所在域
Referer: 发送请求的页面的URI
User-Agent: 浏览器的用户代理字符串
2.设置头部
调用setRequestHeader()方法,两个参数,key-value
必须在open()之后,send()之前调用
注意,有的浏览器允许重写默认头部,有的不允许,所以最好使用自定义头部字段信息
3.获取头部字段
调用getResponseHeader(),参数 --头部字段
getAllResponseHeader(); 获取所有头部长字符串
getAllResponse-Headers(); 返回格式化的多行文本
4.get请求
用于某些请求时,把查询字符串参数追加到URL末尾,但必须经过 encodeURIComponent()编码
/** 返回经过encodeURIComponent()编码的url参数 **@param url * paramObj 参数对象 key-value */ function addURLParam(url, paramObj){ if ( typeof paramObj != "object" ) return url; var tag = '#'; if ( url.indexOf("?") == "-1" ) tag = '?'; for( var key in paramObj ){ url += tag + encodeURIComponent( key ) + "=" + encodeURIComponent( paramObj[key] ); if( tag != '#' ) tag = '#'; } return url; } var url = 'http://www.baidu.com'; var paramObj = {"key1":"value1", "key2":"value2", "key3":"value3"}; addURLParam( url , paramObj );// "http://www.baidu.com?key1=value1#key2=value2#key3=value3" var url = 'http://www.baidu.com'; var paramObj = {"key1":"ss ss", "key2":"wqe\2v", "key3":"sda/sa"}; addURLParam( url , paramObj );//"http://www.baidu.com?key1=ss%20ss#key2=wqe%02v#key3=sda%2Fsa"5.post请求
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if ( xhr.readyState == 4 ){ console.log( xhr.responseText ); } }; xhr.open("post", "/hdzx/eventgetKTVEventList.action", true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send("id: 196, opt: 1, page:1"); // Accept:*/* // Accept-Charset:GBK,utf-8;q=0.7,*;q=0.3 // Accept-Encoding:gzip,deflate,sdch // Accept-Language:zh-CN,zh;q=0.8 // Connection:keep-alive // Content-Length:19 // Content-Type:application/x-www-form-urlencoded // Cookie:cityID=202; JSESSIONID=C5D1BFB15CD2425E873A6CB35D153B46 // Host:www.minifang.cn // Origin:http://www.minifang.cn // Referer:http://www.minifang.cn/ktv/196.html // User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.33 (KHTML, like Gecko) Chrome/27.0.1438.7 Safari/537.33注意:get请求的速度最多可达post请求的两倍