http://blog.csdn.net/wyw308
这几天弄一报表,想到用ajax无刷新逐步显示出来,于是测试了一下。环境c#.net ,ajaxpro,jquery
页面放10个span,如上图,代码:http://blog.csdn.net/wyw308
<span id="id_1">span1</span><br/>
<span id="id_2">span2</span><br/>
<span id="id_3">span3</span><br/>
<span id="id_4">span4</span><br/>
<span id="id_5">span5</span><br/>
<span id="id_6">span6</span><br/>
<span id="id_7">span7</span><br/>
<span id="id_8">span8</span><br/>
<span id="id_9">span9</span><br/>
<span id="id_10">span10</span><br/>
后台模拟取数据代码:
[AjaxPro.AjaxMethod]
public string getSe()
{
System.Threading.Thread.Sleep(1000);
string str="<font color=red>结果</font>:"+System.DateTime.Now.ToString("ss");
return str;
}
一:同步方式,javascrip按循序执行,在发送ajax请求后, 等待,直到得到数据才往下走,这样从id_1,id_2...按部就班地一个接一个显示出来。http://blog.csdn.net/wyw308
同步方式代码
function chaxun(){
for(var i=1;i<=10;i++){
$("#id_"+i+"").html('<img src="images/sayload.gif" width="10" height="10" border="0">');//显示载入图片
var value=arttj.test.getSe().value;
setSpanValue('id_'+i,'span'+i+':'+value);
}
}
function setSpanValue(span,value){
$("#"+span+"").html(value);
}
http://blog.csdn.net/wyw308
二:异步方式,javascrip按循序执行,在发送ajax请求后, 继续往下走,不等待,如果ajax请求有返回数据,再处理,这样id_1,id_2...是根据谁先返回数据就先显示,
异步方式代码:
(操作单个span)
不带参数: function chaxun1(){ $("span").text('');
简写:$("#id_1").html('<img src="images/sayload.gif" width="10" height="10" border="0">');//显示载入图片 arttj.test.getSe(callback); } function callback(res) { $("#id_1").html(res.value); }
function chaxun1(){ $("span").text(''); $("#id_1").html('<img src="images/sayload.gif" width="10" height="10" border="0">'); arttj.test.getSe(function(data){ $("#id_1").html(data.value); }); }
在回调函数里面传参数的形式:
简写:function chaxun1(span){ $("span").text(''); $("#"+span+"").html('<img src="images/sayload.gif" width="10" height="10" border="0">');//显示载入图片 arttj.test.getSe(function(data){ callback(data,span); }); } function callback(res,span) { $("#"+span+"").html(res.value); }
function chaxun1(span){ $("#"+span+"").text(''); $("#"+span+"").html('<img src="images/sayload.gif" width="10" height="10" border="0">'); arttj.test.getSe(function(data){ $("#"+span+"").html(data.value); });
这样,整个异步查询可以这样写:
function chaxun_yibu(){ for(var i=1;i<=10;i++){ chaxun_yibu_1('id_'+i); } } function chaxun_yibu_1(span){ $("#"+span+"").html('<img src="images/sayload.gif" width="10" height="10" border="0">');//显示载入图片 arttj.test.getSe(function(data){ callback(data,span); }); } function callback(res,span) { $("#"+span+"").html(res.value); }
同步异步的区别:打个比方,5个人到对面拿东西,同步的方式就是5个人一个一个地去拿,拿回来放自己位置后下一个继续。。。;异步的方式,5个人可以同时出去,谁先拿回来就先放自己位置