关于Ajax的学习
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请求用于向服务器发送应该被保存的数据。