编写自己的javascript功能库之ajax(仿jquery方式),ajaxjquery本人学习的是php,所以就用php跟js来演示代码了,主要是锻炼自己写js的能力,练练手而已。
下面这是我编写的操作ajax的代码功能,勉强让我称之为库吧。。
js代码实例(tool.ajax.js):
1 /** 2 * js库 使用ajax 3 * @author jlb 4 */ 5 if(typeof tool == 'undefined') { 6 var tool = function(){}; 7 } 8 tool.ajax = function(){}; 9 10 11 /**12 * 获取ajax对象13 * @return 成功返回ajax对象14 */15 tool.ajax.getajaxobject = function () {16 try{return new xmlhttprequest()}catch(e){}17 try{return new activexoject('microsoft.xmlhttp')}catch(e){}18 alert('您的浏览器版本过低!请升级您的浏览器');19 }20 21 22 /**23 * ajax提交数据24 * @param 参数列表25 * @return void26 */27 tool.ajax.formsubmit = function (options) {28 var allow_param, //允许的参数列表29 http, //ajax对象30 url, //请求的地址31 data; //携带的数据32 33 allow_param = ['method', 'url', 'data', 'success', 'type'];34 //设置默认值35 if(!options['type']) {36 options['type'] == 'text';37 }38 39 //处理url与数据, 将数据与url合并40 var disposeparam = function (list) {41 var data = {url:list['url'],data:''};42 if(list['method'] == 'get') {43 data['data'] += '?';44 for (var i in list['data']) {45 data['data'] += i + '=' + list['data'][i] + '&';46 }47 }48 if(list['method'] == 'post') {49 for (var i in list['data']) {50 data['data'] += i + '=' + list['data'][i] + '&';51 }52 }53 return data54 }55 data = disposeparam(options);56 http = tool.ajax.getajaxobject();57 //ajax回调函数58 http.onreadystatechange = function () {59 if(http.readystate == 4 && http.status == 200) {60 if(options['type'] == 'text') {61 options['success'](http.responsetext);62 }63 else if(options['type'] == 'json') {64 options['success'](eval('(' + http.responsetext + ')'));65 }66 }67 }68 69 if(options['method'] == 'get') {70 url = data['url'] + data['data'];71 http.open(options['method'],url);72 //设置请求头解决get提交有缓存问题,通过修改文件最后修改时间解决73 http.setrequestheader('if-modified-since', 0);74 http.send(null);75 return;76 }77 78 if(options['method'] == 'post') {79 http.open(options['method'], data['url']);80 //设置请求头81 http.setrequestheader('content-type', 'application/x-www-form-urlencoded');82 http.send(data['data'].replace(/(&*$)/g,''));83 return;84 }85 }
使用实例(ajax_test.html):
1 2 3 4 5 简单ajax功能库用法示例 6 7 8 9 10 26 27
ajax请求的脚本代码(ajax_test.php):
1
在浏览器打开ajax_test.html这文件,浏览器显示:
名字:莫问出处丶 年龄: 20
如果返回的数据是json格式将option 中的 type 属性的值改为 json即可
有什么问题就评论留言我吧,第一次写博客,有点小激动.本菜鸟迈出第一步了.
http://www.bkjia.com/phpjc/1103619.htmlwww.bkjia.comtruehttp://www.bkjia.com/phpjc/1103619.htmltecharticle编写自己的javascript功能库之ajax(仿jquery方式),ajaxjquery 本人学习的是php,所以就用php跟js来演示代码了,主要是锻炼自己写js的能力,练练手而已...