Ajax

轻松搞定Ajax(分享下自己封装ajax函数,其实Ajax使用很简单,难是难在你得到数据后来怎样去使用这些数据)

一、概念

Ajax(Asynchronous Javascript + XML(异步JavaScript和XML ))

 

二、效果

实现无刷新效果,向后台异步的取数据(不是只有AJAX才能实现这样的效果的哦,如img , script标签中的src属性也可以实现一样的效果,可以自己尝试一下哦)

 

三、本质

可能我们在学习过程中会觉得ajax好难,我也是这样过来的,我觉得是我们把重心放错了。

因为ajax用起来是很方便的(只是写一下请求地址,请求方式,是否异步),我们之所以觉得难,很大一部分原因是因为我们不清楚ajax内部的工作原理。我们应该把重心放在取数据后怎样去用这些数据。

OK,那ajax的本质是什么呢??

ajax的目的还是去后台的某个路径取数据,取文件,就像是img/srcipt标签一样,走的还是http协议

所以,如果你想了解ajax的工作原理,最好是看一下http协议,因为ajax里面所设置的参数,都是为了遵循http协议才这样写的。

也不多说了,直接介绍一个我看过比较靠谱,说得很不错的视频教程,大家可以去下载学习哦(不是打广告~~真心说得好~~嘻嘻)http://pan.baidu.com/s/1vg4hi

 

四、总结

还是那句,ajax使用并不难,理解过后封一个ajax函数直接取数据就行,  难的是你取到数据后怎样去利用这些数据去进一步的开发。

ajax运用例子: 留言本,瀑布流等等,这些取数据的方式是一样的,但对数据进行处理才是重点。

ajax就像是你用script标签去引入JQ一样,这个是很简单的,但引入来之后你怎么用才是重点。

 

OK,下面分享下我自己封装的ajajx函数(有详细注释的哦~~),用法和JQ的ajax相似,当然没JQ的那么完善,但基本够用了。

 

复制代码
 1 /*
 2  *author: Ivan
 3  *date: 2014.06.01
 4  *参数说明:
 5  *opts: {'可选参数'}
 6  **method: 请求方式:GET/POST,默认值:'GET';
 7  **url:    发送请求的地址, 默认值: 当前页地址;
 8  **data: string,json;
 9  **async: 是否异步:true/false,默认值:true;
10  **cache: 是否缓存:true/false,默认值:true;
11  **contentType: HTTP头信息,默认值:'application/x-www-form-urlencoded';
12  **success: 请求成功后的回调函数;
13  **error: 请求失败后的回调函数;
14 */
15 function ajax(opts){
16     //一.设置默认参数
17     var defaults = {    
18             method: 'GET',
19                url: '',
20               data: '',        
21              async: true,
22              cache: true,
23        contentType: 'application/x-www-form-urlencoded',
24            success: function (){},
25              error: function (){}
26         };    
27 
28     //二.用户参数覆盖默认参数    
29     for(var key in opts){
30         defaults[key] = opts[key];
31     }
32 
33     //三.对数据进行处理
34     if(typeof defaults.data === 'object'){    //处理 data
35         var str = '';
36         var value = '';
37         for(var key in defaults.data){
38             value = defaults.data[key];
39             if( defaults.data[key].indexOf('&') !== -1 ) value = defaults.data[key].replace(/&/g, escape('&'));   //对参数中有&进行兼容处理
40             if( key.indexOf('&') !== -1 )  key = key.replace(/&/g, escape('&'));   //对参数中有&进行兼容处理
41             str += key + '=' + value + '&';
42         }
43         defaults.data = str.substring(0, str.length - 1);
44     }
45 
46     defaults.method = defaults.method.toUpperCase();    //处理 method
47 
48     defaults.cache = defaults.cache ? '' : '&' + new Date().getTime() ;//处理 cache
49 
50     if(defaults.method === 'GET' && (defaults.data || defaults.cache))    defaults.url += '?' + defaults.data + defaults.cache;    //处理 url    
51     
52     //四.开始编写ajax
53     //1.创建ajax对象
54     var oXhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
55     //2.和服务器建立联系,告诉服务器你要取什么文件
56     oXhr.open(defaults.method, defaults.url, defaults.async);
57     //3.发送请求
58     if(defaults.method === 'GET')    
59         oXhr.send(null);
60     else{
61         oXhr.setRequestHeader("Content-type", defaults.contentType);
62         oXhr.send(defaults.data);
63     }    
64     //4.等待服务器回应
65     oXhr.onreadystatechange = function (){
66         if(oXhr.readyState === 4){
67             if(oXhr.status === 200)
68                 defaults.success.call(oXhr, oXhr.responseText);
69             else{
70                 defaults.error();
71             }
72         }
73     };
74 }
复制代码

 

 

调用方式:

如   

复制代码
 1 ajax({
 2 
 3   url: '1.php',
 4 
 5   data: {name: 'ivan', sex: 'male', age: '23'},
 6 
 7   success: function (data){ alert('返回数据是:' + data); }
 8 
 9 });
10 
11 ajax({
12 
13   url: '1.php',
14 
15   data: 'name=ivan&sex=male&age=23',
16 
17   cache: false,
18 
19   success: function (data){ alert('返回数据是:' + data); }
20 
21 });
复制代码
posted @ 2014-07-07 09:54  投影  阅读(184)  评论(0编辑  收藏  举报