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

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个人可以同时出去，谁先拿回来就先放自己位置