AJAX
愉快之旅——
prototype.js
篇
對于什么是
ajax
等初級問題，不在本文討論范圍，本文主要圍繞一個框架，以程序實例進行了詳細總結。由于本人水平所限，所以不完善的地方很多。大家可以跟帖提醒。
以前用
jsp
，我用過
prototype.js
作
ajax
框架，也用過
dwr
框架，還用過
buffalo
框架。但是現在項目使用
php
開發，我才再一次重新認識這位老朋友——
prototype.js
。我想說這個開源框架真是太棒了！
（1）
取數據的時候顯示一個進度
loading
。
Ajax
.
Responders
.
register
注冊后，在
ajax
發送
xmlhttp
時候，響應兩事件。
onCreate
，
onComplete
非常棒。可以先寫好一個小小的
div
隱藏在那里，伺機而動，
J
！
var
AjaxLog
=
{
onCreate
:
function
()
{
Ajax
.
activeRequestCount
++;
$
(
"Div_Ajax_Log"
).
style
.
top
=
document
.
body
.
scrollTop
+
230
;
$
(
"Div_Ajax_Log"
).
style
.
left
=
document
.
body
.
scrollLeft
+
document
.
body
.
clientWidth
/
3
;
$
(
"Div_Ajax_Log"
).
style
.
display
=
""
;
},
onComplete
:
function
()
{
Ajax
.
activeRequestCount
--;
$
(
"Div_Ajax_Log"
).
style
.
display
=
"none"
;
}
};
Ajax
.
Responders
.
register
(
AjaxLog
);
而
Div_Ajax_Log
是
DIV id .
其代碼：（當然還有一些
CSS
什么的就沒有帖出來了。）
（2）
對
json
支持非常好
function
setLogDate
()
{
var
count
=
getPram
();
var
url
=
"ajax.php"
;
var kptl=
{
get_log_cmd:
{
log_type:"file",
log_time_start:"1122",
log_time_end:"1122",
log_count_page:"30",
log_request_page:"1",
userSession :"hhh",
mode_id:"1001"
}
}
//
將
json
參數
轉化為字符串
var parm = Object.toJSON(kptl);
// parm = "kptl = " + parm;
try
{
var
ajax
=
new
Ajax
.
Request
(
url
,
{
method
:
"post"
,
parameters
:
parm
,
encodeURI
:
'UTF-8'
,
encodeURIComponent
:
"UTF-8"
,
onComplete
:
showReturn
});
}
catch
(
e
)
{
alert
(
"
創建
ajax
對象失敗
"
);
}
}
/*
* @brief:
回調函數
* @param: xmlhttp
對象
*/
function
showReturn
(
obj
)
{
try
{
var
json
=
obj
.
responseText
;
var mydata = json.evalJSON();
createLogTab
(
mydata
);
}
catch
(
e
)
{
alert
(
"Error:"
+
e
.
message
);
}
}
紅色字體將返回字符串轉換為
JSON
。
這里返回的數據作為參數，調用
createLogTab
(
mydata
);
由于我這里是返回一個數組。
web
頁面寫成一個
tablie
。所以有
createLogTab
函數。
function
createLogTab
(
json
)
{
var
len
=
json
.
length
;
var
tbody
=
document
.
getElementById
(
'TBODY_log'
);
//
刪除原有數據
var
_tr
=
tbody
.
getElementsByTagName
(
"tr"
);
while
(
_tr
.
length
!=
0
)
{
//
用
_tr
[
0
].
parentNode
才能保證每次取到正確的子節點
_tr
[
0
].
parentNode
.
removeChild
(
_tr
[
0
]);
}
for
(
i
=
0
;
i
<
len
;
i
++)
{
var
td_0
=
document
.
createElement
(
'td'
);
var
td_1
=
document
.
createElement
(
'td'
);
var
td_2
=
document
.
createElement
(
'td'
);
var
td_3
=
document
.
createElement
(
'td'
);
var
td_4
=
document
.
createElement
(
'td'
);
var
td_5
=
document
.
createElement
(
'td'
);
td_0
.
innerHTML
=
json
[
i
][
"client_name"
];
td_1
.
innerHTML
=
json
[
i
][
"client_ip"
];
td_2
.
innerHTML
=
json
[
i
][
"file_name"
];
td_3
.
innerHTML
=
json
[
i
][
"viruses_name"
];
td_4
.
innerHTML
=
json
[
i
][
"infection_time"
];
td_5
.
innerHTML
=
json
[
i
][
"clear_result"
];
var
tr
=
document
.
createElement
(
'tr'
);
tr
.
appendChild
(
td_0
);
tr
.
appendChild
(
td_1
);
tr
.
appendChild
(
td_2
);
tr
.
appendChild
(
td_3
);
tr
.
appendChild
(
td_4
);
tr
.
appendChild
(
td_5
);
tbody
.
appendChild
(
tr
);
}
}
題外話，這個
DOM
編程部分曾犯了個經典錯誤。主要是
while
刪除子節點部分，當時用了
for
語句：
for(k=0; k<_tr.length;k++)
{
alert("k:"+k);
_tr[k].parentNode.removeChild(_tr[k]);
}
知道是什么錯誤嗎？呵呵，因為
_tr.length
在不停的變。每次刪一個就長度就少了（而
K
很快到達停止循環的條件）。所以最終都是刪不干凈的。
(3)
替換整個節點控件
<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';
var myAjax = new Ajax.Updater('placeholder', url, {method: 'get', parameters: pars});
}
</script>
<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>
這個非常好玩，眨眼間整體
DIV
都變了。我記得曾經犯了個錯，就是參數。這里參數別寫多了。
有問題可以訪問官方網站：
http://www.prototypejs.org/
【下載一本手冊吧，呵呵】
當然對本有新的想法或者疑問，歡迎留言交流。
posted on 2007-08-24 09:53
-274°C 閱讀(838)
評論(2) 編輯 收藏 所屬分類:
web前端