用大白话揭开Ajax长轮询(long polling)的神秘面纱
在看这篇Ajax长轮询之前可以先看看Ajax轮询技术(没有长),有助于理解: Ajax长轮询属于Ajax轮询的升级版,在客户端和服务端都进行了一些改造,使得消耗更低,速度更快。 "不间断的通过Ajax查询服务端"。 来,小二,先上代码~: Reception.html //客户端 <html> <head> <title></title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> </head> <body> </body> <script type="text/javascript"> //前端Ajax持续调用服务端,称为Ajax轮询技术 var getting = { url:'server.php',dataType:'json',success:function(res) { console.log(res); $.ajax(getting); //关键在这里,回调函数内再次请求Ajax } //当请求时间过长(默认为60秒),就再次调用ajax长轮询 error:function(res){ $.ajax($getting); } }; $.ajax(getting); </script> </html> server.php: //服务端 <?php //这段AJAX请求时间永不过期 set_time_limit(0); $pdo = new PDO('mysql:dbname=test;host=127.0.0.1','root','root'); $resource = $pdo->query('select * from t1'); $result = $resource->fetchall(); while (true) { if ($result) { //exits data print_r(json_encode(array('success'=>'存在数据,返回'))); exit(); //输出数据,退出。然后客户端不间断继续发起请求 } //数据不存在,继续循环。 } ?> 看出了玄机了嘛?长轮询的精髓就在于Ajax的回调函数,继续再次调用Ajax请求(不间断的原理就在这里,成功返回后立即再次调用): $.ajax(getting); 下面是是Ajax 长轮询的图解: 首先请忽略绿色字体的使用限制,然后哪位朋友有可以推荐的画图工具可以推荐给我,我现在用的是忆图图示。 图中有两次请求(本文中的请求默认均为Ajax),第一次很快返回了结果,然后不间断的立即发送第二次请求,但是第二次请求没有获得数据,所以请求迟迟没有返回(被挂在服务器了,但只要有数据就会再次返回),如果第二次的请求返回数据后,第三次请求旋即会立刻发出,这种技术就称为Ajax 长轮询。 用伪代码来表示就是这样: <?php //客户端通过Ajax发起请求 if ('客户端发送请求' && '服务端有数据可以返回') { echo '返回数据给客户端'; echo '客户端通过Ajax继续发起请求,然后继续if判断'; }else{ echo'没有数据可以返回,再次执行一次if判断'; } ?> 最关键的地方在于前一次请求结束后,第二次请求立即不间断的发起,这个就叫做Ajax长轮询 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |