码迷,mamicode.com
首页 > Web开发 > 详细

Ajax

时间:2015-09-17 23:25:59      阅读:410      评论:0      收藏:0      [点我收藏+]

标签:

最近写博比较频繁,主要是为了将自己平时零散的知识点总结一下,让自己的知识能成一下体系。

今天把高程的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

 

Ajax

标签:

原文地址:http://www.cnblogs.com/oyangyin/p/4817871.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!