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

来源：互联网发布：jade软件339 编辑：程序博客网时间：2024/05/16 09:27

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个人可以同时出去，谁先拿回来就先放自己位置
	
					
					   ajax同步异步详解与回调带参数实例测试
	  	   ajax同步异步详解与回调带参数实例测试
	  	   Ajax的同步与异步详解
	  	   AJAX       同步与异步
	  	   ajax同步与异步
	  	   ajax同步与异步
	  	   ajax同步与异步
	  	   ajax异步与同步
	  	   ajax同步与异步
	  	   AJAX 异步与同步
	  	   Ajax同步与异步
	  	   同步与异步详解
	  	   Ajax同步与异步区别
	  	   ajax的同步与异步
	  	   AJAX的同步与异步
	  	   ajax的同步与异步
	  	   Ajax的同步与异步
	  	   ajax同步与异步理解
	     		  
	  	   Linux技巧点滴(二)
	  	   Android学习笔记进阶15之Shader渲染
	  	   cgvg——命令行下的代码查看工具
	  	   Linux应用程序之文件锁操作
	  	   hdu 1098-二项式定理
	  	   ajax同步异步详解与回调带参数实例测试
	  	   Java类型转换
	  	   人机交互界面设计的三个工作流程
	  	   好好学一遍JavaScript 笔记(九)——事件处理函数/监听函数/事件对象
	  	   2012夏季购物计划表
	  	   c++重载函数
	  	   一致性Hash算法(KetamaHash)的c#实现
	  	   RS485/RS232/RS422接口定义
	  	   Oracle数据库exp/imp 命令使用