编写自己的javascript功能库之Ajax(仿jquery方式)
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了编写自己的javascript功能库之Ajax(仿jquery方式)相关的知识，希望对你有一定的参考价值。
本人学习的是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 void 26 */ 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 data 54 } 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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>简单ajax功能库用法示例</title> 6 </head> 7 <body> 8 <!--引入编写好的tool.ajax.js文件--> 9 <script src="tool.ajax.js"></script> 10 <script> 11 //ajax_test.html 12 13 //仿jquery方式ajax请求 14 var options = { 15 url : "ajax_test.php", //请求的脚本地址 16 method : "get", //是get还是post,注意必须是小写哦..懒得转了... 17 data : {name:"莫问出处丶",age: 20}, // 要携带的数据,只支持json格式 18 success : function (msg) { //请求完毕后回调函数.. 19 alert(msg); 20 }, 21 type : ‘text‘, //不写默认就是text,也就是说回调函数携带的数据是字符串.另外就是json 22 }; 23 24 tool.ajax.formSubmit(options); 25 </script> 26 </body> 27 </html>
ajax请求的脚本代码(ajax_test.php):
1 <?php 2 //ajax_test.php 3 echo "名字：{$_GET[‘name‘]} 年龄: {$_GET[‘age‘]}";
在浏览器打开ajax_test.html这文件,浏览器显示:
名字：莫问出处丶 年龄: 20
如果返回的数据是json格式将option 中的 type 属性的值改为 json即可
有什么问题就评论留言我吧,第一次写博客,有点小激动.本菜鸟迈出第一步了.
以上是关于编写自己的javascript功能库之Ajax(仿jquery方式)的主要内容，如果未能解决你的问题，请参考以下文章