AJAX
愉快之旅——
prototype.js
篇
對(duì)于什么是
ajax
等初級(jí)問(wèn)題，不在本文討論范圍，本文主要圍繞一個(gè)框架，以程序?qū)嵗M(jìn)行了詳細(xì)總結(jié)。由于本人水平所限，所以不完善的地方很多。大家可以跟帖提醒。
以前用
jsp
，我用過(guò)
prototype.js
作
ajax
框架，也用過(guò)
dwr
框架，還用過(guò)
buffalo
框架。但是現(xiàn)在項(xiàng)目使用
php
開(kāi)發(fā)，我才再一次重新認(rèn)識(shí)這位老朋友——
prototype.js
。我想說(shuō)這個(gè)開(kāi)源框架真是太棒了！
（1）
取數(shù)據(jù)的時(shí)候顯示一個(gè)進(jìn)度
loading
。
Ajax
.
Responders
.
register
注冊(cè)后，在
ajax
發(fā)送
xmlhttp
時(shí)候，響應(yīng)兩事件。
onCreate
，
onComplete
非常棒。可以先寫(xiě)好一個(gè)小小的
div
隱藏在那里，伺機(jī)而動(dòng)，
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 .
其代碼：（當(dāng)然還有一些
CSS
什么的就沒(méi)有帖出來(lái)了。）
（2）
對(duì)
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
參數(shù)
轉(zhuǎn)化為字符串
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
(
"
創(chuàng)建
ajax
對(duì)象失敗
"
);
}
}
/*
* @brief:
回調(diào)函數(shù)
* @param: xmlhttp
對(duì)象
*/
function
showReturn
(
obj
)
{
try
{
var
json
=
obj
.
responseText
;
var mydata = json.evalJSON();
createLogTab
(
mydata
);
}
catch
(
e
)
{
alert
(
"Error:"
+
e
.
message
);
}
}
紅色字體將返回字符串轉(zhuǎn)換為
JSON
。
這里返回的數(shù)據(jù)作為參數(shù)，調(diào)用
createLogTab
(
mydata
);
由于我這里是返回一個(gè)數(shù)組。
web
頁(yè)面寫(xiě)成一個(gè)
tablie
。所以有
createLogTab
函數(shù)。
function
createLogTab
(
json
)
{
var
len
=
json
.
length
;
var
tbody
=
document
.
getElementById
(
'TBODY_log'
);
//
刪除原有數(shù)據(jù)
var
_tr
=
tbody
.
getElementsByTagName
(
"tr"
);
while
(
_tr
.
length
!=
0
)
{
//
用
_tr
[
0
].
parentNode
才能保證每次取到正確的子節(jié)點(diǎn)
_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
);
}
}
題外話，這個(gè)
DOM
編程部分曾犯了個(gè)經(jīng)典錯(cuò)誤。主要是
while
刪除子節(jié)點(diǎn)部分，當(dāng)時(shí)用了
for
語(yǔ)句：
for(k=0; k<_tr.length;k++)
{
alert("k:"+k);
_tr[k].parentNode.removeChild(_tr[k]);
}
知道是什么錯(cuò)誤嗎？呵呵，因?yàn)?/span>
_tr.length
在不停的變。每次刪一個(gè)就長(zhǎng)度就少了（而
K
很快到達(dá)停止循環(huán)的條件）。所以最終都是刪不干凈的。
(3)
替換整個(gè)節(jié)點(diǎn)控件
<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>
這個(gè)非常好玩，眨眼間整體
DIV
都變了。我記得曾經(jīng)犯了個(gè)錯(cuò)，就是參數(shù)。這里參數(shù)別寫(xiě)多了。
有問(wèn)題可以訪問(wèn)官方網(wǎng)站：
http://www.prototypejs.org/
【下載一本手冊(cè)吧，呵呵】
當(dāng)然對(duì)本有新的想法或者疑問(wèn)，歡迎留言交流。
posted on 2007-08-24 09:53
-274°C 閱讀(845)
評(píng)論(2) 編輯 收藏 所屬分類(lèi):
web前端