ajax异步请求实例

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1. 问题分析

用户管理显示页面：usermanagement.tpl(也可以说是MVC中的V，即视图)

用户管理数据发送页面：usermanagement.php(也可以说是MVC中的M，即模型)

获取用户所在队列的执行，需要一个参数即：username。原本想的是在数据发送页面usermanagement.php中直接用命令执行，然后再将结果发送到显示页面，这样原理上是可行的，但是地理所的用户有70多人，也就是说我要70多人全部执行完毕之后我的页面才能显示出来，这里的处理方式是同步的，也就是说结果不返回是不能看到页面的，这样导致的结果是：页面直接卡死，即使能出来，正常人也根本等不了，因为一条命令执行得3、4秒钟，谁受得了。

实际可行的解决方式是：采用ajax异步请求，重点在异步，我利用用户名处理的逻辑不在usermanagement.php中，而是转移到了usermanagement_show_queues.js中，针对加载完的页面，每一行代表一个用户，逐行读取，也就是说会逐行启动ajax去服务器端请求结果，由于是异步的页面会正常显示，也不会影响其它的事件。

2. ajax代码

$().ready(function(){
$('#userlist_table tr').each(function(i,item){
if(i>1){
$.ajax({
url:'../csm/showuserqueue-ajax.php',
type:'GET',
data:'username='+ $(this).children().eq(2).text(),
dataType:'text',
success:function(data){
$('#userlist_table tr').eq(i).children().eq(8).text(data);
},
error:function(XMLHttpRequest, textStatus, errorThrown){
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
}
});
});

3. 代码解析

这里需要注意的是：$('#userlist_table tr').each()会逐行遍历表格的，后面function(i,item)中i代表的就是表格某一行的id。

success中：$('#userlist_table tr').eq(i).children().eq(8).text(data); 我刚开始的时候采用的是：$(this).children().eq(8).text(data)；这样根本显示不出来，而且在firebug中监控中显示：$('......') undefined ，这才想到用前面的方式来写，是标记不到吗？

4. 实现效果图

一、页面加载完后，发送异步请求