本人學習的是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即可
有什麼問題就評論留言我吧,第一次寫博客,有點小激動.本菜鳥邁出第一步了.
