Ajax requests the backend and sometimes does not receive the return value of the workaround

Yesterday afternoon to do the project encountered a problem, posted out for easy later to read, but also for everyone a reference.

Problem:

Specifically to do is a file import function, the Import function is successful, but the interface has not been returned value, troubleshooting the afternoon, debugging can be returned, but the browser debugging interface, but not to return results.

Reason:

Always thought it was my backstage program has a problem, back home at night to think of Ajax problems, the asynchronous processing of Ajax to synchronize, came out the effect, the specific reasons please see the following detailed.

The Ajax method in jquery has a property of async for controlling synchronization and Asynchrony, which by default is true, that is, AJAX requests are asynchronous requests by default, and sometimes Ajax synchronization is used in projects. This synchronization means that when the JS code is loaded into the current AJAX will be the page all the code to stop loading, the page appears suspended animation state, when this Ajax execution will continue to run other code page suspended animation state lifted. Asynchronous is the same as when the Ajax code is running, as other code can run.

The async attribute in Ajax, which controls how data is requested, is true by default, which is the default way to request data asynchronously.

One, async value is true (async)

When the Ajax sends the request, in the process of waiting for the server side to return, the foreground will continue executing the script behind the AJAX block until the server side returns the correct result to execute the success, that is, two threads are executing, and the AJAX block makes a request after a thread And the script behind the AJAX block (another thread)

$.ajax ({       type: "POST",      URL: "Venue.aspx?act=init",       dataType: "html",      success:function (Result) {  //function1 ()       F1 ();        F2 ();      }      Failure:function (Result) {        alert (' Failed ');       },  }  function2 ();

In the example above, when the Ajax block makes a request, he will stay function1 () and wait for the server side to return, but at the same time (during this wait), the foreground will execute function2 ().

Second, async value is False (synchronous)

When executing the current AJAX will stop the execution of the following JS code, until the completion of Ajax execution, to continue to execute the following JS code.

$.ajax ({       type: "POST",      URL: "Venue.aspx?act=init",      dataType: "html",      Async:false,    Success:function (Result) {  //function1 ()       F1 ();        F2 ();      }     Failure:function (Result) {        alert (' Failed ');       },  }  

When the Asyn is set to False, then the AJAX request is synchronized, that is, when the AJAX block makes the request, he will wait in the function1 () this place, not to execute function2 (), until the function1 () part of the execution is complete.

The difference between Ajax synchronization and Asynchrony

var returnvalue = null; XMLHTTP = Createxmlhttp (); Xmlhttp.onreadystatechange = function () {   if (xmlhttp.readystate = = 4 && Xmlhttp.status = =) {     if (XMLH Ttp.responsetext = = "true") {       returnvalue = "true";     }     else {       returnvalue = "false";     }}   }; Xmlhttp.open ("Post", url,true);//Asynchronous Transfer Xmlhttp.setrequestheader (" If-modified-since "," 0 "); Do not cache Ajaxxmlhttp.send (SENDSTR); return returnvalue; Xmlhttpreq.onreadystatechange state value can be used asynchronously! The following are different ways of calling asynchronous and synchronous: Xmlhttpreq.open ("GET", url,true);//asynchronous  Xmlhttpreq.onreadystatechange = Showresult; Showresult is the callback function name  xmlhttpreq.send (null), function Showresult () {    if (xmlhttpreq.readystate = = 4) {      if ( Xmlhttpreq.status = = () {   ******   }}  }

Xmlhttpreq.open ("GET", url,false);//Synchronous mode        xmlhttpreq.send (null);        Showresult (); Showresult Although it is a callback function name but the specific usage is not the same ~  function Showresult () {          //if (xmlhttpreq.readystate = = 4) {This is not necessary  , Direct dosomething Bar ~          //if (xmlhttpreq.status = =) {            ******//dosomething          //}        //}  }xmlhttp.open (" Post ", url,true);

If it is synchronous (false), the return value is true or false because the onreadystatechange is executed after the send is executed, and the program waits until the onreadystatechange is finished. The next statement will not continue until the responsetext is taken, so the returnvalue must have a value.

If it is asynchronous (true), the return value must be NULL, because the program does not wait for the XMLHTTP response after execution of the send, and continues execution of the next statement, so ReturnValue has not yet come and the change has returned null.

All if you want to get the XMLHTTP return value must be synchronous, async cannot get the return value.

It is important to note that synchronous asynchronous use of the XMLHTTP pool is only possible when the XMLHTTP is acquired, and the used XMLHTTP cannot be removed from the pool because the XMLHTTP used readystate is 4. So synchronous async will send but not execute onreadystatechange.

Original: https://yq.aliyun.com/ziliao/107005

Ajax requests the backend and sometimes does not receive the return value of the workaround