关于Ajax的学习

浏览数：23 / 时间：2015年06月09日

1、下列代码实现了对原生XHR对象的支持：

 1 function createXHR(){
 2    if(typeof XMLHttpRequest!="undefined"){
 3      return newXMLHttpRequest();       
 4    }else if(typeof ActiveXObject!="undefined"){
 5         if(typeof arguments.callee.activeXString!="string"){
 6             var version=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len;
 7             for(i=0;len=versons.length;i<len;i++){
 8                 try{
 9                     new ActiveXObject(versons[i]);
10                     arguments.callee.activeXString=versons[i];
11                     break;      
12                 }catch(ex){
13                 }
14             }
15         }
16         return new ActiveXObject(arguments.callee.activeXString);
17     } else{
18          throw new Error("No XHR object available");      
19     }     
20 }

首先检查原生的XMLHttpRequest()对象是否存在，存在则返回新实例。如果原生不存在，则检测ActiveX对象，如果这两种对象都不存在，抛出一个错误。

var xhr=createXHR();

xhr.open() 　接受三个参数，要发送的请求类型；请求的url，和异步发送请求的布尔值；

要发送特定的请求：

xhr.open("get","example.txt",false);

　　xhr.send(null);

send()方法接受一个参数为请求主体发送的数据。不需要通过请求主体发送数据，必须传入null

上述请求是同步的，JavaScript代码会等到服务器相应后继续执行，收到相应后，相应的数据会自动填充XHR对象的属性；为确保收到适当的相应，应检查状态代码；

if((xhr.status>=200&&xhr.status<300)||xhr.status==304){

　　　　alert(xhr.responseText);

　　else{

　　　　alert("Request was not success:"+xhr.status);

　　}

     }

发送异步请求时候，要检测XHR对象的readyState属性

var xhr=createXHR();

xhr.onreadystatechange=function(){

　　if(xhr.readyState==4){

　　　　if((xhr.status>=200&&xhr.status<300)||xhr.status==304){

　　　　　　alert(xhr.responseText);

　　　　else{

　　　　　　alert("Request was not success:"+xhr.status);

　　　   }

    　　 }

　　}

};

xhr.open("get","example.text",true);

send(null);

在接收响应之前可以通过xhr.abort()方法取消异步请求，终止请求后，应该对XHR对象解除引用。

2、GET请求用于向服务器查询某些信息，将查询字符串参数追加到URL的末尾，可以用下面的函数向url末尾添加查询字符串参数

function addURLParam(url,name,value){

url+=(url.indexof("?")==-1?"?":"&");

url+=encodeURLComponent(name)+"="+encodeURLComponent(value);

return url;

}

3、POST请求用于向服务器发送应该被保存的数据。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

关于Ajax的学习