ajax同步异步详解与回调带参数实例测试

这几天弄一报表，想到用ajax无刷新逐步显示出来，于是测试了一下。环境c#.net ，ajaxpro，jquery

页面放10个span，如上图，代码：http://blog.youkuaiyun.com/wyw308

[html] view plain copy

1. <span id="id_1">span1</span><br/>  
2. <span id="id_2">span2</span><br/>  
3. <span id="id_3">span3</span><br/>  
4. <span id="id_4">span4</span><br/>  
5. <span id="id_5">span5</span><br/>  
6. <span id="id_6">span6</span><br/>  
7. <span id="id_7">span7</span><br/>  
8. <span id="id_8">span8</span><br/>  
9. <span id="id_9">span9</span><br/>  
10. <span id="id_10">span10</span><br/>  

后台模拟取数据代码：

[csharp] view plain copy

1. [AjaxPro.AjaxMethod]  
2.         public string getSe()  
3.         {  
4.             System.Threading.Thread.Sleep(1000);  
5.             string str="<font color=red>结果</font>:"+System.DateTime.Now.ToString("ss");  
6.             return str;  
7.         }  

一：同步方式，javascrip按循序执行，在发送ajax请求后， 等待，直到得到数据才往下走，这样从id_1,id_2...按部就班地一个接一个显示出来。http://blog.youkuaiyun.com/wyw308

同步方式代码

[javascript] view plain copy

1. function chaxun(){  
2.         for(var i=1;i<=10;i++){  
3.             $("#id_"+i+"").html('<img src="images/sayload.gif" width="10" height="10" border="0">');//显示载入图片  
4.             var value=arttj.test.getSe().value;  
5.             setSpanValue('id_'+i,'span'+i+':'+value);  
6.             }  
7.         }  
8.         function setSpanValue(span,value){  
9.             $("#"+span+"").html(value);  
10.         }  

http://blog.youkuaiyun.com/wyw308
二：异步方式，javascrip按循序执行，在发送ajax请求后， 继续往下走，不等待，如果ajax请求有返回数据，再处理，这样id_1,id_2...是根据谁先返回数据就先显示，

异步方式代码：

（操作单个span）

[javascript] view plain copy

1. 不带参数：  
2. function chaxun1(){  
3.         $("span").text('');  
4.         <pre name="code" class="javascript">               $("#id_1").html('<img src="images/sayload.gif" width="10" height="10" border="0">');//显示载入图片  
5.         arttj.test.getSe(callback);  
6.         }  
7.         function callback(res)  
8.         {  
9.                 $("#id_1").html(res.value);  
10.         }  

简写：

[javascript] view plain copy

1. function chaxun1(){  
2.         $("span").text('');  
3.         $("#id_1").html('<img src="images/sayload.gif" width="10" height="10" border="0">');  
4.         arttj.test.getSe(function(data){  
5.         $("#id_1").html(data.value);  
6.         });  
7. }  

在回调函数里面传参数的形式：

[javascript] view plain copy

1. function chaxun1(span){  
2.         $("span").text('');  
3.         $("#"+span+"").html('<img src="images/sayload.gif" width="10" height="10" border="0">');//显示载入图片  
4.         arttj.test.getSe(function(data){  
5.         callback(data,span);  
6.         });  
7.         }  
8.         function callback(res,span)  
9.         {  
10.         $("#"+span+"").html(res.value);  
11.         }  

简写：

[javascript] view plain copy

1. function chaxun1(span){  
2.         $("#"+span+"").text('');  
3.         $("#"+span+"").html('<img src="images/sayload.gif" width="10" height="10" border="0">');  
4.         arttj.test.getSe(function(data){  
5.         $("#"+span+"").html(data.value);  
6.         });  

这样，整个异步查询可以这样写：

[javascript] view plain copy

1. function chaxun_yibu(){  
2.             for(var i=1;i<=10;i++){  
3.             chaxun_yibu_1('id_'+i);  
4.             }  
5.         }  
6.         function chaxun_yibu_1(span){  
7.         $("#"+span+"").html('<img src="images/sayload.gif" width="10" height="10" border="0">');//显示载入图片  
8.         arttj.test.getSe(function(data){  
9.         callback(data,span);  
10.         });  
11.         }  
12.         function callback(res,span)  
13.         {  
14.         $("#"+span+"").html(res.value);  
15.         }  

同步异步的区别：打个比方，5个人到对面拿东西，同步的方式就是5个人一个一个地去拿，拿回来放自己位置后下一个继续。。。；异步的方式，5个人可以同时出去，谁先拿回来就先放自己位置