ajax异步请求实例
2013-06-24 21:51
169 查看
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代码
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. 实现效果图
一、页面加载完后,发送异步请求
二、请求结果返回后,显示在页面上
通过这个我对ajax的异步有了更深的了解,明白了什么时候用异步什么时候用同步。哈哈,加油,坚持每天的学习!!
用户管理显示页面: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. 实现效果图
一、页面加载完后,发送异步请求
二、请求结果返回后,显示在页面上
通过这个我对ajax的异步有了更深的了解,明白了什么时候用异步什么时候用同步。哈哈,加油,坚持每天的学习!!
相关文章推荐
- AJAX实现简单的注册页面异步请求实例代码
- Ajax异步请求实例
- 原生ajax异步请求和跨域请求实例
- Ajax实现异步操作实例_针对JSON格式的请求数据
- Ajax实现异步操作实例_针对XML格式的请求数据
- 一个简单的ajax实例:异步请求的例子
- ajax异步请求实例
- Ajax实现异步操作实例_针对XML格式的请求数据
- 表单验证 ajax异步请求实例 json传参
- jquery的ajax异步请求接收返回json数据实例
- jquery的ajax异步请求接收返回json数据实例
- java视频教程:Ajax异步请求原理与实例讲解
- jquery的ajax异步请求接收返回json数据实例
- ajax 同步请求和异步请求的差异分析
- 掌握 Ajax (2)-使用 JavaScript 和 Ajax 发出异步请求
- jquery $.ajax()异步请求设置
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
- ajax同步异步详解与回调带参数实例测试
- Jquery中Ajax/Post同步和异步请求