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/ 【下载一本手册吧，呵呵】
当然对本有新的想法或者疑问，欢迎留言交流。