Ajax 调用时的“等待响应”消息答案

【问题标题】："Waiting for response" message when Ajax callAjax 调用时的“等待响应”消息
【发布时间】：2011-05-20 05:20:47
【问题描述】：

当我在 HEAD 部分使用 Ajax 调用（jquery）时，我在带有旋转圆圈的 chrome 浏览器上找到了“等待响应消息”。我不想要这种丑陋的样子。有没有办法避免这种情况？

PS：当我使用输入标签来调用 JavaScript（Ajax 调用）函数时，如

<input id="launcher" type="button" onfocus="go()" value="Go!"></input>

我看不到等候圈。因为我的程序应该自动调用该函数我不能使用这个方法。（如果我使用document.getElementById("launcher").focus()自动启动该函数，它再次显示等待圆圈。）我猜有一些不同的上下文来调用JavaScript函数。

更新这是我的示例代码

<HEAD>
<SCRIPT TYPE="text/javascript">
function go() {
    $.ajax({
        url: "/myService",
        success: function(data){
            document.getElementById("result_area").innerHTML = data;
            go();
        }
    });
}
$(document).ready(function(){
    go() //Here I want to Comet call;
});
go(); //should start automatically.
</SCRIPT>
</HEAD>
<BODY>
    <!-- <input id="launcher" type="button" onfocus="go()" value="Go!"></input>
    This doesn't show the waiting circle. Why? Use different call context? -->        
<div id="result_area"></div>
</BODY>

【问题讨论】：

当你在头部调用$.ajax时，你是否将它包裹在$(document).ready()中？
@nrabinowitz 我会以 3:1 的比例说这是问题所在。这可能应该作为一个潜在的答案发布。 :)
基于您显示的代码片段确实有效（而不是实际上导致您出现问题的代码）我猜您正在执行同步请求，并且您在从头部调用它，因为它与生成初始页面所需的所有其他 HTTP 请求一起排队。这是相当疯狂的猜测，因为您没有向我们提供可以向我们展示实际情况的简化测试用例。
你为什么在你的成功函数中再次调用go()？你想创建一个无限循环吗？
是的，我用它来使用异步请求。我想不断地从服务器获取通知。如果我把这个代码放在 HEAD 之外，它可以解决问题吗？我认为 BODY 标签中的代码无法解决这种情况。我应该把这段代码放在哪里？那么为什么它在输入标签中起作用？

标签： javascript jquery html ajax response

【解决方案1】：

我想强调一些问题

<input id="launcher" type="button" onfocus="go()" value="Go!"></input>

这应该是

<input  type="button" id="launcher" value="Go!" />

然后

如果你想要一个图像而不是文本然后在表单前放置一个 div 并带有 display:none
在 ajax 调用中，您没有编写带有扩展名的 url 链接（.php 或 .html 或 .js )
成功：你再次调用go()，这闻起来像递归函数
你向服务器发送什么数据？？ 数据： ajax 选项中缺少
还提到dataType（可选）
如果您不想自动运行 ajax，请在某些事件上执行（就像我在单击时执行的操作）
准备好文档绑定
在head中编写javascript代码（最好在</body>之前编写）

我尽力告诉你基本的，这是我的方式

HTML

<div id="waiting" style="display: none;">
    <img src="images/ajax-loader.gif" title="Loader" alt="Loader" />
</div>
<form>
     // here is your form
</form>

jQuery

<SCRIPT TYPE="text/javascript">
$(document).ready(function(){
$('#waiting').show(500);
// instead run automatically now it will work on click of button
$('#launcher').click( function () {      
    $.ajax({
          url: "/myService.html", // or whatever page 
          // by the way where is data which you sent on server??
          data: { email : $('#email').val() }, // like i send the email to the serever
             dataType : "json",
             async : false,
          success: function(data){
            $('#waiting').hide();
            $("#result_area").html(data);
        }
    }); 
});
})

【讨论】：

感谢您的回复。但首先，我不需要 ajax 调用中的数据，因为我没有要发送的数据。其次，我想使用 Comet 调用服务器，所以我需要在这里进行递归调用。最后，我应该自动调用ajax。所以如果我使用document.getElementById("launcher").click()，我会再次得到等待圈。
@user150497，你没有在你的问题中提到，这就是我建议的原因。
我认为document.getElementById("launcher").click()，从 Javascript 发送的事件和来自用户的事件在浏览器中的处理方式不同。后面的案例不显示等待圈。（“等待来自..的响应”消息）

【解决方案2】：

我发现XMLHttpRequest 上的这个等待圈取决于浏览器的实现。在 IE7、Firefox4 上它没有显示任何等待圆圈或栏，而 chrome11、Windows safari 有一个。

我认为应该制定这方面的标准，因为它对用户体验影响很大。

【讨论】：

Chrome 上的 Gmail 也有同样的问题。我猜 gmail 也使用了XMLHttpRequest 电话。参考这个。link