AJAX愉快之旅——prototype.js篇
AJAX愉快之旅——prototype.js篇<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /?>对于什么是ajax等初级问题，不在本文讨论范围，本文主要围绕一个框架，以程序实例进行了详细总结。由于本人水平所限，所以不完善的地方很多。大家可以跟帖提醒。
以前用jsp，我用过prototype.js 作ajax框架，也用过dwr框架，还用过buffalo框架。但是现在项目使用php开发，我才再一次重新认识这位老朋友——prototype.js。我想说这个开源框架真是太棒了！
（1） 取数据的时候显示一个进度loading。
Ajax.Responders.register注册后，在ajax发送xmlhttp时候，响应两事件。onCreate，
onComplete 非常棒。可以先写好一个小小的div隐藏在那里，伺机而动，J！
varAjaxLog={
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支持非常好
functionsetLogDate()
{
varcount = getPram();
varurl = "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<?xml:namespace prefix = st1 ns = "urn:schemas-microsoft-com:office:smarttags" /?><city w:st="on"><place w:st="on"><span style="COLOR: black">ajax</span></place></city> = newAjax.Request(
url,
{
method:"post",
parameters:parm,
encodeURI:'UTF-8',
encodeURIComponent:"UTF-8",
onComplete:showReturn
});
}
catch(e)
{
alert("创建ajax对象失败");
}
}
/*
* @brief: 回调函数
* @param: xmlhttp对象
*/
functionshowReturn(obj)
{
try
{
varjson = obj.responseText;
var mydata = json.evalJSON();
createLogTab(mydata);
}
catch(e)
{
alert("Error:"+e.message);
}
}
红色字体将返回字符串转换为JSON。
这里返回的数据作为参数，调用createLogTab(mydata);由于我这里是返回一个数组。web页面写成一个tablie。所以有createLogTab函数。
functioncreateLogTab(json)
{
varlen=json.length;
vartbody=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++)
{
vartd_0=document.createElement('td');
vartd_1=document.createElement('td');
vartd_2=document.createElement('td');
vartd_3=document.createElement('td');
vartd_4=document.createElement('td');
vartd_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"];
vartr=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.parentNode.removeChild(_tr);
}
知道是什么错误吗？呵呵，因为_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 >
<div id="placeholder"></div>
这个非常好玩，眨眼间整体DIV 都变了。我记得曾经犯了个错，就是参数。这里参数别写多了。
有问题可以访问官方网站：
http://www.prototypejs.org/【下载一本手册吧，呵呵】
当然对本有新的想法或者疑问，欢迎留言交流。
页:
[1]