XHR
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 XMLHttpRequest();} catch(e) { var IEXHRVers =["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"]; for (var i=0,len=IEXHRVers.length;i< len;i++) { try {xhr = new ActiveXObject(IEXHRVers[i]);} catch(e) {continue;} } } return xhr; } 使用XHRvar xhr = XHR(); //open方法 创建一个新的http请求,并指定此请求的方法、URL以及验证信息(用户名/密码) xhr.open("get","test.txt",true); /*第一个参数是请求方式,一般用get与post方法,与form标签的method类似 第二个参数是请求的URL 第三个参数是请求是同步进行还是异步进行,true表示异步 调用了open方法仅仅是传递了参数而已*/ xhr.send(null);//调用了send方法后才会发出请求 //并且get方式发送请求时send参数是null 在服务器环境中执行上面的脚本,并且给一个php或asp脚本发送请求,会发现服务器端脚本其实会被执行 //PHP脚本 $fp =fopen("a.txt","wb"); fwrite($fp,"PHP文件在后台执行了"); fclose($fp); echo "返回内容!"; 上面PHP脚本的返回内容不会直接在页面上显示出来,必需要用JS通过XHR对象接收 var xhr = XHR(); xhr.open("get","test.php",true); xhr.onreadystatechange = callback;//在readystatechange事件上绑定一个函数 //当接收到数据时,会调用readystatechange事件上的事件处理函数 xhr.send(null); functon callback() { //在这里面没有使用this.readyState这是因为IE下面ActiveXObject的特殊性 if (xhr.readyState == 4) {//readyState表示文档加载进度,4表示完毕 alert(xhr.reponseText);//responseText属性用来取得返回的文本 } } XHR对象参考readyState属性 返回当前请求的状态
var xhr =XHR(); alert(xhr.readyState);//0 xhr.open("get","test.htm",true); alert(xhr.readyState);//1 xhr.send(null); alert(xhr.readyState);//IE下会是4,而FF下会是2 //可以通过readystatechange事件监听 xhr = XHR(); xhr.onreadystatechange = function () { alert(xhr.readyState);//FF下会依次是1,2,3,4但最后还会再来个1 //IE下则是1,1,4 }; xhr.open("get",true); xhr.send(null); 从上面可以看到,对于readyState这个属性,各个浏览器看法也不一样,但其实我们只需要知道当状态为4的时候可以获取response就行了! status 返回当前请求的http状态码status属性返回当前请求的http状态码,此属性仅当数据发送并接收完毕后才可获取。完整的HTTP状态码如下:
事实上,我们只需要知道状态为200的时候(OK)才读取response就行了! responseText与responseXMLresponseText 将响应信息作为字符串返回 . XMLHTTP尝试将响应信息解码为Unicode字符串,XMLHTTP默认将响应数据的编码定为UTF-8,如果服务器返回的数据带BOM(byte-order mark),XMLHTTP可以解码任何UCS-2 (big or little endian)或者UCS-4 数据。注意,如果服务器返回的是xml文档,此属性并不处理xml文档中的编码声明。你需要使用responseXML来处理。 responseXML 将响应信息格式化为Xml Document对象并返回 . 如果响应数据不是有效的XML文档,此属性本身不返回XMLDOMParseError,可以通过处理过的DOMDocument对象获取错误信息。 其它一些XHR对象的方法abort 取消当前请求 getAllResponseHeaders 获取响应的所有http头 每个http头名称和值用冒号分割,并以rn结束。当send方法完成后才可调用该方法。 getResponseHeader 从响应信息中获取指定的http头 当send方法成功后才可调用该方法。如果服务器返回的文档类型为"text/xml",则这句话xmlhttp.getResponseHeader("Content-Type");将返回字符串"text/xml"。可以使用getAllResponseHeaders方法获取完整的http头信息。 setRequestHeader 单独指定请求的某个http头 如果已经存在已此名称命名的http头,则覆盖之。此方法必须在open方法后调用。 请求方式GET 请求 //JS var xhr = XHR(); xhr.open("get","test.php?qs=true&userName=abc&pwd=123456",true); xhr.onreadystatechange = function () { if (xhr.readyState==4 && xhr.status ==200) { alert(xhr.responseText); } }; xhr.send(null); //PHP print_r($_GET); POST 请求 //JS var xhr = XHR(); xhr.open("post",true); xhr.onreadystatechange = function () { if (xhr.readyState==4 && xhr.status ==200) { alert(xhr.responseText); } }; //比GET请求多了一步 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //另外,数据是通过send方法发送的 xhr.send("qs=true&userName=abc&pwd=123456"); //PHP header("Cache-Control: no-cache,must-revalidate");//可以让浏览器不缓存结果 print_r($_POST); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |