"Waiting for response" message when Ajax call
When I use Ajax call(jquery) in the HEAD section I find a "waiting for response message" on a chrome browser with revolving circle. I don't want this ugly look. Is there a way to avoiding this?
PS: When I use input tag to call the JavaScript(Ajax call) function like
<input id="launcher" type="button" onfocus="go()" value="Go!"></input>
I couldn't see a waiting circle. Cause my program should call the function automatically I couldn't use this method.(If I use document.getElementById("launcher").focus() to automatically start the function, It showed waiting circle again.) I guess there's a some different context to call JavaScript function.
Update Here is my sample code
<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>
there are some issue i want to highlight
<input id="launcher" type="button" onfocus="go()" value="Go!"></input>
this should be
<input type="button" id="launcher" value="Go!" />
then
- if u want a image instead of text then put a div before form with display:none
in ajax call you are not writing url link with extension (.php or .html or .js )
in success : you again calling
go(), this smell like recursive function- what data u r sending to the server?? data: is missing from ajax option
- also mention dataType ( optional)
- if you dont want to run ajax automatically then do it on some event( like i do on click)
- bind with the document ready
- write javascript code in head ( best practice to write just before
</body>)
i tried my hard to tell you the basic, here is my way
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);
}
});
});
})
I found that this waiting circle on XMLHttpRequest is depend on a browser implementation. On IE7, Firefox4 it didn't show any waiting circle or bar while chrome11, Windows safari had one.
I believe that standard on this should be made cause it impacts greatly on user experience.
加载中,请稍侯......
精彩评论