本人学习的是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 <!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.html12 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,也就是说回调函数携带的数据是字符串.另外就是json22 };23 24 tool.ajax.formSubmit(options);25 </script>26 </body>27 </html>
ajax请求的脚本代码(ajax_test.php):
1 <?php2 //ajax_test.php3 echo "名字：{$_GET['name']} 年龄: {$_GET['age']}";
在浏览器打开ajax_test.html这文件,浏览器显示:
名字：莫问出处丶 年龄: 20
如果返回的数据是json格式将option 中的 type 属性的值改为 json即可
有什么问题就评论留言我吧,第一次写博客,有点小激动.本菜鸟迈出第一步了.