Performing synchronus Requests using $.ajax

Question

we know that only synchrnous requests are done with $.ajax with an option of async:false But i have seen in the Jquery manual saying that "synchronous requests may temporarily block the browser disabling any actions while the request is active". I have some questions such as

I have seen some answers saying to use callback () How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?. How can i implement this to my function .

In the below Function if the Request Fails or if the response doesnot return How can i handle it .I mean Can i use "error:" or some thing like that . How can I improve this Function efficently i mean using call back and error handling .It is said that (we can never have error and success call back with a request)

function empvalidate() {
          var exists = false;             // default return value is false
          var empno = $("#empno").val();
          if (empno != '') {
            $.ajax({
              url: "emp.php",
              async: false,
              dataType: "json",
              data: {'param1': $("#param1").val(), 'empno': $("#empno").val()},
              success: function (data) {
                exists = data.status;     // set status of existence to outer variable
              }
            });
          }
          return exists;                  // return actual value
        }

Please edit the question to make it clearer, because this sure looks like a duplicate. What do you need to know that the question you linked doesn't answer? — Jeff Sternal, Nov 30 '10 at 16:54
@Jeff:How Do i associate the Callback function with the above code — Someone, Nov 30 '10 at 17:06
Unless I'm misunderstanding something, your `success` function is the callback they're talking about (in the answers to the linked question). — Jeff Sternal, Nov 30 '10 at 17:26
@Jeff:No Iam Looking for the One How can I get jQuery to perform a synchronous, rather than asynchronous, AJAX request? which is in this question "beforecreate" — Someone, Nov 30 '10 at 17:35
you answered that in your own question (as has jAndy below): you specify `async:false` in the ajax call. — Jeff Sternal, Nov 30 '10 at 17:54

jAndy · Accepted Answer · 2010-11-30T16:58:40.503

Your synchronized request will cause the UI thread (and therefore the browser) to wait until the XMLHttpRequest object returns (kind regardless whether it failed or succeded).

jQuery will execute your success / complete and error handler the same way it would execute when you're using a "normal" asynchronous request. But it will wait / block before it does so.

So the worst case scenario here would be, that the actual request takes a huge amount of time. Network latencys are pretty bad in this context, large data amounts.. all those will entirely lock up your UI thread which is obviously an aweful user expierence.

I really don't know where someone should use a synchronized ajax request nowadays.

How can i rewrite the above function to overcome the things of what you said .Any Suggestion please — Someone, Nov 30 '10 at 17:57

score 0 · Answer 2 · answered Nov 30 '10 at 17:00

Rather than using async: false, you'd be better off doing something like this:

function begin_ajax() {
    // Set your UI states here
}

function success_ajax(data) {
    // Run whatever needs to run if the request is successful.
}

function error_ajax(xhr, error_type, msg) {
    // Display error messages
}

function complete_ajax() {
    // Clean up UI
}
$.ajax({
    beforeSend: begin_ajax,
    success: success_ajax,
    error: error_ajax,
    complete: complete_ajax
    // Your parameters here
});

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

Use the complete function and make a case for "timeout"

from jQuery Docs

complete(XMLHttpRequest, textStatus) - Function

A function to be called when the request finishes (after success and error callbacks are executed). The function gets passed two arguments: The XMLHttpRequest object and a string categorizing the status of the request ("success", "notmodified", "error", "timeout", or "parsererror"). This is an Ajax Event.

so Code would look something like this on your ajax:

function empvalidate() {
      var exists = false;             // default return value is false
      var empno = $("#empno").val();
      if (empno != '') {
        $.ajax({
          url: "emp.php",
          async: false,
          dataType: "json",
          data: {'param1': $("#param1").val(), 'empno': $("#empno").val()},
          success: function (data, ts) {
            
              if(ts == "success")
                   exists = data.status; // set status of existence to outer variable
              else if(ts == "timeout")
              {
                   $(document).trigger('customTimeoutHandler');
              }
          }
        });
      }
      return exists;                  // return actual value
    }

Not really sure of the application here, but remember that you can also set a custom timeout variable here too. Not too sure what you would want it to be, it just depends on your scenario.

Performing synchronus Requests using $.ajax

3 Answers3