使用 $.ajax 执行同步请求

Question

我们知道只有同步请求是通过 $.ajax 完成的，并带有 async:false 选项 但我在Jquery手册中看到说“同步请求可能会暂时阻塞浏览器” 在请求处于活动状态时禁用任何操作”。我有一些问题，例如

我看到一些答案说使用回调 () 如何让 jQuery 执行同步而不是异步 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) {
                exists = data.status;     // set status of existence to outer variable
              }
            });
          }
          return exists;                  // return actual value
        }

Answer 1

您的同步请求将导致 UI 线程（以及浏览器）等待，直到 XMLHttpRequest 对象返回（不管它是失败还是成功）。

jQuery 将执行您的成功/完成和错误处理程序，就像您使用“正常”异步请求时执行的方式一样。但在此之前它会等待/阻塞。

因此，最糟糕的情况是，实际请求需要花费大量时间。在这种情况下，网络延迟非常糟糕，数据量很大……所有这些都会完全锁定你的 UI 线程，这显然是一个很棒的用户体验。

我真的不知道现在应该在哪里使用同步ajax请求。

Answer 2

您最好不要使用 async: false，而是执行以下操作：

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

Answer 3

“超时”提供理由

使用完整的函数并为 jQuery Docs 中的

完成（XMLHttpRequest，
textStatus) - 函数

一个函数
请求完成时调用
（成功和错误回调之后
执行）。函数被传递了
两个参数： XMLHttpRequest
对象和一个字符串分类
请求的状态（“成功”，
“未修改”、“错误”、“超时”或
“解析器错误”）。这是一个 Ajax 事件。

所以代码在你的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
    }

不太确定这里的应用程序，但请记住你也可以在这里设置一个自定义超时变量。不太确定你想要它是什么，这仅取决于你的场景。