prototype Ajax.Updater应用小试

来源：互联网发布：高分起名软件编辑：程序博客网时间：2024/04/27 18:43

今天使用prototype 客户端JS框架做了一个AJAX 的小程序,感觉prototype 对javsscript的封装真是绝妙,OK,废话少说

主页面代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Ajax.Updater应用测试</title>
    <script type="text/javascript" src="prototype_1.4.js"></script>
<script>
function getHTML(request_pars)
{
var url = 'AjaxTest1.aspx';
var pars = request_pars;
var myAjax = new Ajax.Updater(
'Main',
url,                       /*Request路径*/
{
method: 'get',             /*以get方式请求*/
parameters: pars,          /*页面传参*/
onFailure   : reportError, /*失败的时候调用 reportError 函数*/
onLoading   : Loading,     /*正在获得内容的时候*/
onComplete : Success,      /*内容获取完毕的时候*/
evalScripts: true          /*允许执行返回内容中的脚本代码     如果你的服务器逻辑是连同HTML 标记返回JavaScript 代码， Ajax.Updater对象可以执行那段JavaScript代码。为了使这个对象对待响应为JavaScript，你只需在最后参数的对象构造方法中简单加入evalScripts: true属性。*/
*/
});
}
function Loading()
{
$('loding').style.display = 'block';
$('Main').style.display = 'none';
/*
Element.show('loding');
Element.hide('Main');
*/
}
function Success()
{
Element.hide('loding');
Element.show('Main');
}
function reportError(request)
{
alert('数据加载失败');
}
</script>

<input type=button value="表1的内容" onclick="getHTML('id=1')">
<input type=button value="表2的内容" onclick="getHTML('id=2')">
<div id='loding'><img src='loading2.gif' /><br />
Loading...</div>
<div id="Main"></div>
</body>
</html>

被请求页AjaxTest1.aspx代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>aaaaa</title>
<script language="javascript" type="text/javascript">
sayHi = function(){
alert('返回对象中的脚本触发成功');
};
</script>
</head>

<body>
<form runat="server">
<asp:gridview id="GridView1" runat="server"></asp:gridview>
<input type=button value="触发返回对象中的脚本" onclick="sayHi()">
</form>
</body>
</html>
该页面的读取数据部分为根据调用页传递的参数进行不同的数据表进行GridView数据绑定,代码省略