标签:
最近写博比较频繁,主要是为了将自己平时零散的知识点总结一下,让自己的知识能成一下体系。
今天把高程的Ajax部分看完了,简单梳理一下,如有理解不到位的地方,也请各位网友指点一下,抱拳!
先上大段代码
1 //处理IE7之前版本的兼容并创建XHR对象; 2 function createXHR(){ 3 if(typeof XMLHttpRequest != "undefined"){ 4 //如果存在XMLHttpRequest则直接使用该对象 5 return new XMLHttpRequest(); 6 }else if(typeof ActiveXObject != "undefined"){ 7 //以下均为处理IE兼容问题 8 if(typeof arguments.callee.activeXString != "string"){ 9 var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"]; 10 var len=null; 11 for (var i=0; len=versions.length; i < len; i++) { 12 try{ 13 new ActiveXObject(versions[i]); 14 arguments.callee.activeXString=versions[i]; 15 break; 16 }catch(ex){ 17 //do something 18 }; 19 }; 20 }; 21 return new ActiveXObject(arguments.callee.activeXString); 22 }else{ 23 //如果没有XHR对象可用的话,也需要处理一下 24 throw new Error("No XHR Object Available"); 25 } 26 }; 27 28 var xhr=createXHR();//创建变量xhr 29 30 //在调用open之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性 31 xhr.onreadystatechange=function(){ 32 //监控xhr的状态:readyState的值有5个,每次值改变都会触发一次readystatechange 33 //readyState==0 ---→未初始化,尚未调用open方法 34 //readyState==1 ---→启动,调用open尚未调用send 35 //readyState==2 ---→发送,调用send尚未接收到相应 36 //readyState==3 ---→接收,收到部分响应数据 37 //readyState==4 ---→完成,接收到全部响应数据且可以在客户端使用了 38 if(xhr.readyState==4){ 39 if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ 40 //200为响应成功的标志,304表示资源没有被修改 41 alert(xhr.responseText); 42 }else{ 43 alert("Request was unsuccessful:"+xhr.status); 44 }; 45 }; 46 }; 47 xhr.open("get","example.txt",true); 48 xhr.send(null); 49 //xhr.abort();//在接收到响应之前调用该方法可以取消异步请求
以上是最简单的一个Ajax请求的过程,大概的流程如下:
1.先定义一个XMLHttpRequest对象,这里的难点就是需要考虑IE兼容;
2.启动一个请求以备发送open():该方法接收三个参数(实际可以接收5个,不过处于安全考虑,不建议使用):要发送的请求类型(“get”,“post”),请求的URL和表示是否异步的布尔值;这里还涉及到跨域问题,后面会提到;
3.发动特定请求send(null):接收一个参数,即要作为请求主体发送的数据。如果不需要的话,也需要写一个null作为参数。
4.检查响应状态,根据不同的状态,做出不同的处理,这部分代码一般写在open方法之前,主要是为了处理跨浏览器兼容问题。
jQuery里已经将Ajax封装好了,调用很方便。
1 $.ajax({ 2 3 type: ‘POST‘, 4 5 url: url , 6 7 data: data , 8 9 success: success , 10 11 dataType: dataType 12 13 });
以上写的很简单,其实Ajax还是很复杂的,w3c上介绍的很详细,一点点慢慢看。其实前端发展了这么多年了,基本大神们已经把各种东西都总结出来了,资料也很多。
http://www.w3school.com.cn/jquery/ajax_ajax.asp
标签:
原文地址:http://www.cnblogs.com/oyangyin/p/4817871.html