Question

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

PS：当我使用input标签调用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>

Answer 1

我想强调一些问题

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

这应该是

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

然后

如果你想要一个图片而不是文字，那么在表格之前加上一个div display：none

ajax

您没有使用扩展程序（ .php 或 .html 或 .js）编写网址链接）
成功：你再次调用go()，这就像递归函数一样
你发送到服务器的数据是什么？ ajax选项中缺少数据
还提及 dataType（可选）
如果您不想自动运行ajax，请在某些事件上执行（就像我点击一样）
与文档准备好绑定
在头部编写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);
        }
    }); 
});
})

Answer 2

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

我认为应该制定标准，因为它会对用户体验产生很大影响。

在Ajax调用时“等待响应”消息

2 个答案:

HTML

的jQuery