“Waiting for response” message when Ajax call

2019-04-15 10:13发布

问题:

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>

回答1:

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);
        }
    }); 
});
})


回答2:

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.