轻松搞定Ajax(分享下自己封装ajax函数,其实Ajax使用很简单,难是难在你得到数据后来怎样去使用这些数据)
2014-07-05 14:20
465 查看
hey,guys!今天我们一起讨论下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的那么完善,但基本够用了。
调用方式:
如
如有bug,请望指正; 水平有限,欢迎拍砖~~
一、概念
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的那么完善,但基本够用了。
/* *author: Ivan *date: 2014.06.01 *参数说明: *opts: {'可选参数'} **method: 请求方式:GET/POST,默认值:'GET'; **url: 发送请求的地址, 默认值: 当前页地址; **data: string,json; **async: 是否异步:true/false,默认值:true; **cache: 是否缓存:true/false,默认值:true; **contentType: HTTP头信息,默认值:'application/x-www-form-urlencoded'; **success: 请求成功后的回调函数; **error: 请求失败后的回调函数; */ function ajax(opts){ //一.设置默认参数 var defaults = { method: 'GET', url: '', data: '', async: true, cache: true, contentType: 'application/x-www-form-urlencoded', success: function (){}, error: function (){} }; //二.用户参数覆盖默认参数 for(var key in opts){ defaults[key] = opts[key]; } //三.对数据进行处理 if(typeof defaults.data === 'object'){ //处理 data var str = ''; var value = ''; for(var key in defaults.data){ value = defaults.data[key]; if( defaults.data[key].indexOf('&') !== -1 ) value = defaults.data[key].replace(/&/g, escape('&')); //对参数中有&进行兼容处理 if( key.indexOf('&') !== -1 ) key = key.replace(/&/g, escape('&')); //对参数中有&进行兼容处理 str += key + '=' + value + '&'; } defaults.data = str.substring(0, str.length - 1); } defaults.method = defaults.method.toUpperCase(); //处理 method defaults.cache = defaults.cache ? '' : '&' + new Date().getTime() ;//处理 cache if(defaults.method === 'GET' && (defaults.data || defaults.cache)) defaults.url += '?' + defaults.data + defaults.cache; //处理 url //四.开始编写ajax //1.创建ajax对象 var oXhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //2.和服务器建立联系,告诉服务器你要取什么文件 oXhr.open(defaults.method, defaults.url, defaults.async); //3.发送请求 if(defaults.method === 'GET') oXhr.send(null); else{ oXhr.setRequestHeader("Content-type", defaults.contentType); oXhr.send(defaults.data); } //4.等待服务器回应 oXhr.onreadystatechange = function (){ if(oXhr.readyState === 4){ if(oXhr.status === 200) defaults.success.call(oXhr, oXhr.responseText); else{ defaults.error(); } } }; }
调用方式:
如
ajax({ url: '1.php', data: {name: 'ivan', sex: 'male', age: '23'}, success: function (data){ alert('返回数据是:' + data); } }); ajax({ url: '1.php', data: 'name=ivan&sex=male&age=23', cache: false, success: function (data){ alert('返回数据是:' + data); } });
如有bug,请望指正; 水平有限,欢迎拍砖~~
相关文章推荐
- [茗洋]自己封装的MyNPOI,轻松实现可定制的Excel报表数据导出
- 久违的json使用大法 (通常Ajax希望返回多个键值对,可以用将要返回的数据先封装到一个对象中,再将这个对象转为json格式)
- 使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
- Rsa 非对称加密算法使用问题分享--使用通过密钥对同一段数据加密得到结果每次不一样
- 自己实现ajax封装示例分享
- 自己使用Jquery封装各种功能分享
- AJAX异步请求,底层使用hibernate查询后的数据json封装之前的处理
- JQuery validate 的使用(使用ajax来提交数据)(ajax如何封装表单数据)
- 网友Admin‘分享自己写的Ajax封装类(转)
- 自己实现ajax封装示例分享
- [置顶] ajax请求得到后台数据,前台页面,使用table模板然后clone,显示表格,,不用append拼接 “字符串和HTML表格标签”
- MVC使用ajax异步刷新时怎样输出从后台中传过来的JSON数据
- vue 使用自己封装的原生 ajax
- 使用原生ajax访问后台数据并将其展现在前端页面中(小菜鸟自己整理玩的,大神勿喷)
- MVC使用ajax异步刷新时怎样输出从后台中传过来的JSON数据
- 使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
- Thinkphp中自己组合的数据怎样使用框架的分页
- ajax使用serialize()方法后,数据无法封装并获取(PUT提交方式!)
- 为了方便维护,以后无论如何,数据库操作一定使用封装的强类型,或者自己封装的数据操作类。后记,使用分布式查询解决多个数据库之间的查询操作。
- 使用asp.net 2.0的CreateUserwizard控件如何向自己的数据表中添加数据