无聊的AJAX嵌套(首页太神圣,还是蹂躏下新手区)
标题不过是搞笑 呵呵
最近时间稍微空一点,每天任务不是很重,在园子里翻来看去,学习学习:),也想看看jquery,之前一直用的prototype,prototype.js的开发文档也从来没看过,用得最多的就是$("id")这个东西和异步调用玩下,前天在园子里看到一个prototype.js1.4.0的开发手册,从头到尾看了一下,有些很方便的东西可以直接用,尤其有些常用方法,直接调用就好了,也不用再单独写了,下了一个prototype.js1.6.0的,之前一直用的是prototype.js1.4.0(被改写过,主要配合httprequest.js方便异步的调用)看了文档里提到的异步调用,和我以前用的方式也不太一样,最终原理当然是一样的了,下面主要说下文档里Ajax.Updater的调用。
在web里实现异步效果,一般都加了一个中转页面,当前页面后台没有什么事件之类的
var myAjax = new Ajax.Updater(
'msg',//如果不需要标签,保留两个个单引号即可
//{success: 'msg'}, //与onFailure配用
url,
{
method: 'post',
parameters: pars,
onLoading : loading,
onComplete : complete//不与onFailure并用
//onFailure : reportError
});
prototype.js 1.4.0版本里实现局部刷新,上面那么调用就可以了(prototype.js 1.6.0同样适用),上面的msg是一个div标签,异步调用后Respose.Write()输出的结果就会显示在此div标签里,如果不想传入标签(可以传一个空串,即一对引号),想在异步调用完后再赋值也是可以的,下面这样
function complete(request)
{
$('msg').innerHTML = request.responseText;
$('tip').innerHTML = "<img border=\"0\" src=\"images/ajaxico_confirm.gif\">统计完成......";
}
很多时候用异步效果,都喜欢在加载(loading)时,能有个齿轮图片在转动,其实我也喜欢,呵呵,单一的一个中转页面的调用,可以提示正在加载数据。。。,加载完成两种状态,本身prototype.js里面页面请求的状态定了有好几种,具体可以看下源码,比较常用的一般是onLoading(加载时),onComplete(加载完成,执行成功),onFailure(加载失败,程序出现异常),就提示效果而言onComplete和onFailure在异步调用时不会同时提示,如果调用时程序发生异常,提示的还是onComplete里的消息,如下面
var myAjax = new Ajax.Updater(
'msg',//如果不需要标签,保留两个个单引号即可
//{success: 'msg'}, //与onFailure配用
url,
{
method: 'post',
parameters: pars,
onLoading : loading,
onFailure : reportError,
onComplete : complete//不与onFailure并用
});
如果程序抛出异常,并不会执行reportError方法,仍然是执行complete方法,也就是说加了success属性后只与onFailure配用,现在说下所谓的嵌套调用,之所有想用“异步嵌套”,有时候是想多几部提示效果,点一个按钮,从数据库里抽取数据进行统计,统计完后还要生成报表文件下载(可能需要提示正在查询数据。。。,正在读写文件。。。,读写完成等提示最后弹出文件下载提示框),整个过程要想达到无刷新的效果,这么来个嵌套还是可以的,像下面调用
建一个default.aspx页面
<head runat="server">
<title>无标题页</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
function getHTML()
{
var url = 'WebForm1.aspx';
var pars = 'name=peace';
var myAjax = new Ajax.Updater(
'msg',//如果不需要标签,保留两个个单引号即可
//{success: 'msg'}, //与onFailure配用
url,
{
method: 'post',
parameters: pars,
onLoading : loading,
onComplete : complete
//onFailure : reportError
});
function loading(request)
{
$('msg').innerHTML = "";
$('tip').innerHTML = "<img border=\"0\" src=\"images/ajaxloading.gif\">正在抽取


}
function complete(request)
{
//alert(request.responseText);也可以通过返回值进行判断加载出差或完成
$('msg').innerHTML = request.responseText;// 如果updater方法中不想传入标签时,这里也可以给标签赋值
//$('tip').innerHTML = "抽取完成


//setTimeOut("Delay()",2000);
var url = 'WebForm2.aspx';
//var pars = 'name=peace';
var myinnerAjax = new Ajax.Updater(
'',
url,
{
method: 'post',
parameters: null,//pars,如果没有参数,可以给一个空值
onLoading : loading2,
onComplete : complete2
});
function loading2(request)
{
$('tip').innerHTML = "<img border=\"0\" src=\"images/zoho-busy.gif\">正在统计


}
function complete2(request)
{
$('msg').innerHTML = request.responseText;
$('tip').innerHTML = "<img border=\"0\" src=\"images/ajaxico_confirm.gif\">统计完成


}
}
function success(request)
{
$('msg').innerHTML = "成功执行";
}
function reportError(request)
{
$('tip').innerHTML = "<img border=\"0\" src=\"images/ajaxico_error.gif\">抽取数据发生错误


}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" value="测试" onclick="getHTML()" />
<div id="msg">
</div>
<div id="tip">
</div>
</form>
</body>
</html>
prototype.js1.4--1.6的都可以
webForm1.aspx.cs 里是这样的
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000);
if (Request["name"] == "peace")
{
Response.Write("peace");
Response.End();
}
else
{
Response.Write("hello");
Response.End();
}
}
}
webForm2.aspx.cs里是这样的
public partial class WebForm2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000);
Response.Write("peaceli");
Response.End();
}
}
上面的两个页面相当于加了一个延时时间,当然实际的应用中可以不用,时间执行多长时间就是多长时间,点击测试按钮的效果如下
上面就是整个无刷新的提示过程,但是还是有一点不尽如人意,上面贴出的有两句被注释掉了,就是在第一次异步调用完成后的complete方法里
$('tip').innerHTML = "抽取完成......";
setTimeOut("Delay()",2000);
原本想有四个提示的,写了个空的Delay()方法 主要是想在此停顿2秒,再提示下面两个,可惜不行,主要是因为异步调用相当与线程调用一样,并不会像想象的那样去顺序执行顺序提示,不过我之前的有写过一篇随笔,那里面是可以有四个提示的,那里面我调用的方法不一样,并不只用了prototype.js一个文件,想看的可去看下,那里有下载的demo,地址是 文章链接,完了,放到新手区忽悠下,上面只是个人看法。