jQuery显示服务器实时响应文本,等待ajax完成

时间:2017-01-01 23:46:40

标签: javascript jquery ajax codeigniter

我正在尝试创建一个函数来显示服务器响应,同时等待ajax完成,案例如下:

  1. 我查了几个复选框,让我们说10个复选框
  2. 单击
  3. 提交按钮并触发ajax
  4. 在服务器端,有一个循环来执行复选框中的每个值,这可能需要很长时间每个循环(现在将有10个循环迭代)
  5. 现在在等待ajax完成时,我想从服务器获取响应(通过循环编号),如Getting data 1 of 10, (total) details obtained...
  6. 完成ajax后,来自服务器的响应将是“操作成功,重定向到结果页面”
  7. 目前只有4号以上工作,我目前的做法是:

    1. 我在CI中创建了2个函数,函数A循环执行操作,函数B显示函数A中的消息集
    2. 我创建了2个ajax函数,ajax X和ajax Y.X用于从B获取json响应,而Y用于提交并将表单发送给A.
    3. 我首先使用setInterval 1秒调用ajax X,此 只能运行 一次,因为一旦启动它就会被ajax Y覆盖。当我尝试在新选项卡中打开功能B时(当ajax仍在运行时),它只是加载并且仅在功能A / ajax完成后显示消息。幸运的是,在Chrome中我尝试打开功能B时收到此消息:Waiting for active connection
    4. 那么我该如何实现呢?因为我的客户端不是基于IT的,我想显示一些进度文本,以便他知道正在处理多少数据。

      顺便说一句,目前我只使用加载GIF并在完成ajax时隐藏它。

      非常感谢任何帮助或线索,谢谢。

1 个答案:

答案 0 :(得分:2)

制作两个函数是一个坏主意,因为即使在同一服务器上并行运行的A()和B()也不能共享它们的变量。你可以只使用一个函数和一些巧妙的缓冲使用来存档该结果。我添加了{ {1}}匹配消耗一些时间的代码。

sleep

注意<?php set_time_limit(0); ob_implicit_flush(true); ob_end_flush(); session_write_close(); // prevents session lockdowns for($i = 0; $i < 10; $i++){ sleep(1); //Hard work!! zZZ $p = $i+1; echo $p . ' of 10 complete '; //get sent immediately } sleep(1); echo '10 of 10 complete'; implicit flush表示只要您回复某些内容,就会立即将发送到浏览器,而不会断开您的连接,这样您就可以获得1,2,3 ...每次循环迭代都是从同一个HTTP连接中逐个进行

接下来是javascript只指向此处需要注意的是ob_implicit_flush(true);不仅会调用状态更改而是调用来自服务器的每个响应

onreadystatechange

还有一点 var xhr = new XMLHttpRequest(); var prevResponse = ''; xhr.onreadystatechange = function() { if (this.readyState == 4){ //stuff you want to do when ajax completes alert('Done!') } else if (this.readyState > 2){ var newResponse = this.responseText.substring(prevResponse.length); document.getElementById("status").innerText = newResponse; prevResponse = this.responseText; } }; xhr.open("GET", "ajax.php", true); xhr.send(); 属性本质上是缓冲即。如果您从服务器发送'A'responseText会给'A',但现在如果您发送'B'xhr.responseText则不会是'B'而是'AB'就是我使用过的原因xhr.responseText保留最后一个响应,以便我可以从当前prevResponse中减去此次,以便只获得此次服务器发送给我的内容。您甚至可以进一步将其设置为进度条,只需让服务器发送即可JSON中的百分比,在客户端上解码,将responseText应用于进度条,并使用一些很酷的CSS效果。

对于$ .ajax试试这个

value