无聊的AJAX嵌套(首页太神圣，还是蹂躏下新手区)
2008-12-09 16:55
253 查看
标题不过是搞笑 呵呵
最近时间稍微空一点，每天任务不是很重，在园子里翻来看去，学习学习：），也想看看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页面
<html xmlns="http://www.w3.org/1999/xhtml" >
<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,地址是 文章链接，完了，放到新手区忽悠下，上面只是个人看法。
该小demo下载地址
最近时间稍微空一点，每天任务不是很重，在园子里翻来看去，学习学习：），也想看看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页面
<html xmlns="http://www.w3.org/1999/xhtml" >
<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,地址是 文章链接，完了，放到新手区忽悠下，上面只是个人看法。
该小demo下载地址
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 新手指导：教你如何查看识别hadoop是32位还是64位
- CoreThink开发（十一）首页控制器判断移动设备还是PC并做相应处理
- Web向QT传递对象(还是很新手)
- CoreThink开发（十一）首页控制器判断移动设备还是PC并做相应处理
- 新手选车系列之（三）: 买轿车还是SUV
- 各抒己见：是迎接挑战还是被蹂躏
- 新手都会遇到的问题 该学hadoop？还是spark?
- 如何区分一个程序员是“老手“还是“新手“？
- 嵌入式新手该先学C语言还是先学汇编？
- 如何区分一个程序员是“老手“还是“新手“？
- DEDE问答首页调用代码很实用.长度-宽度都可以调整.适合新手调用
- 新手上路选择陪练还是租车
- 基础都掌握了却还是敲不出代码？编程新手如何快速提升coding能力？
- STC51单片机自学经验分享 新手学习51单片机用汇编语言还是C语言
- 新手选车系列之（四）: 三厢还是两厢
- 如何区分一个程序员是“老手“还是“新手“？
- 发外链指向首页好还是文章页好呢？
- 新手指导：教你如何查看识别hadoop是32位还是64位
- 3.35奶萨新手无聊看看帖
- 这个网站的的，首页有特点。它能根据浏览器是否支持HTML5或者是Silverlight，来决定是启用HTML5的Video还是Silverlight播放视频。