如何让jQuery执行同步而不是异步的Ajax请求？

我有一个提供标准扩展点的JavaScript小部件。 其中之一是beforecreate函数。 它应该返回false以防止创建项目。

我已经使用jQuery在此函数中添加了Ajax调用：

beforecreate: function (node, targetNode, type, to) {
  jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),

  function (result) {
    if (result.isOk == false) 
        alert(result.message);
  });
}

但是我想防止我的小部件创建项目，因此我应该在母函数中而不是在回调中返回false 。 有没有一种方法可以使用jQuery或任何其他浏览器内API执行同步AJAX请求？

---

#1楼

function getURL(url){
    return $.ajax({
        type: "GET",
        url: url,
        cache: false,
        async: false
    }).responseText;
}


//example use
var msg=getURL("message.php");
alert(msg);

---

#2楼

所有这些答案都错过了要点，即使用async：false进行Ajax调用将导致浏览器挂起，直到Ajax请求完成。 使用流控制库将解决此问题，而无需挂起浏览器。 这是Frame.js的示例：

beforecreate: function(node,targetNode,type,to) {

    Frame(function(next)){

        jQuery.get('http://example.com/catalog/create/', next);
    });

    Frame(function(next, response)){

        alert(response);
        next();
    });

    Frame.init();
}

---

#3楼

从jQuery文档中 ：您将异步选项指定为false，以获取同步Ajax请求。 然后，您的回调函数可以在您的母函数继续执行之前设置一些数据。

如果按照建议进行更改，则代码如下所示：

beforecreate: function (node, targetNode, type, to) {
    jQuery.ajax({
        url: 'http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),
        success: function (result) {
            if (result.isOk == false) alert(result.message);
        },
        async: false
    });
}

---

#4楼

这是示例：

$.ajax({
  url: "test.html",
  async: false
}).done(function(data) {
   // Todo something..
}).fail(function(xhr)  {
   // Todo something..
});

---

#5楼

优秀的解决方案！ 我注意到，当我尝试实现它时，如果我在成功子句中返回一个值，则该值将返回未定义状态。 我必须将其存储在变量中并返回该变量。 这是我想出的方法：

function getWhatever() {
  // strUrl is whatever URL you need to call
  var strUrl = "", strReturn = "";

  jQuery.ajax({
    url: strUrl,
    success: function(html) {
      strReturn = html;
    },
    async:false
  });

  return strReturn;
}

---

#6楼

我使用了Carcione给出的答案，并将其修改为使用JSON。

 function getUrlJsonSync(url){

    var jqxhr = $.ajax({
        type: "GET",
        url: url,
        dataType: 'json',
        cache: false,
        async: false
    });

    // 'async' has to be 'false' for this to work
    var response = {valid: jqxhr.statusText,  data: jqxhr.responseJSON};

    return response;
}    

function testGetUrlJsonSync()
{
    var reply = getUrlJsonSync("myurl");

    if (reply.valid == 'OK')
    {
        console.dir(reply.data);
    }
    else
    {
        alert('not valid');
    }    
}

我添加了'JSON'的数据类型 ，并将.responseText更改为responseJSON 。

我还使用返回对象的statusText属性检索了状态。 注意，这是Ajax响应的状态，而不是JSON是否有效。

后端必须以正确（格式正确）的JSON返回响应，否则返回的对象将是不确定的。

回答原始问题时，需要考虑两个方面。 一种是告诉Ajax同步执行（通过设置async：false ），另一种是通过调用函数的return语句而不是回调函数返回响应。

我也用POST进行了尝试，并且有效。

我将GET更改为POST并添加了数据：postdata

function postUrlJsonSync(url, postdata){

    var jqxhr = $.ajax({
        type: "POST",
        url: url,
        data: postdata,
        dataType: 'json',
        cache: false,
        async: false
    });

    // 'async' has to be 'false' for this to work
    var response = {valid: jqxhr.statusText,  data: jqxhr.responseJSON};

    return response;
}

请注意，以上代码仅在async为false的情况下有效。 如果要设置async：true，则返回的对象jqxhr在AJAX调用返回时将是无效的，只有在异步调用完成后才有效，但这太晚了，无法设置响应变量。

---

#7楼

请记住，如果您正在执行跨域Ajax调用（通过使用JSONP ）-您无法同步进行，那么jQuery将忽略async标志。

$.ajax({
    url: "testserver.php",
    dataType: 'jsonp', // jsonp
    async: false //IGNORED!!
});

对于JSONP调用，您可以使用：

1. Ajax调用您自己的域-并在服务器端进行跨域调用
2. 更改代码以异步工作
3. 使用像Frame.js这样的“函数定序器”库（此答案 ）
4. 阻止UI而不是阻止执行（此答案 ）（我最喜欢的方式）

---

#8楼

使用async: false您将获得被阻止的浏览器。 对于非阻塞同步解决方案，可以使用以下方法：

ES6 / ECMAScript2015

使用ES6，您可以使用generator和co库 ：

beforecreate: function (node, targetNode, type, to) {
    co(function*(){  
        let result = yield jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value));
        //Just use the result here
    });
}

ES7

使用ES7，您可以只使用asyc await：

beforecreate: function (node, targetNode, type, to) {
    (async function(){
        let result = await jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value));
        //Just use the result here
    })(); 
}

---

#9楼

注意：由于以下警告消息，您不应使用async: false ：

从Gecko 30.0（Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27）开始，由于对用户体验的负面影响，主线程上的同步请求已被弃用。

Chrome甚至会在控制台中对此发出警告：

不赞成在主线程上使用同步XMLHttpRequest，因为它会对最终用户的体验产生不利影响。 如需更多帮助，请访问https://xhr.spec.whatwg.org/ 。

如果您正在执行此类操作，则可能会中断您的页面，因为它可能会在一天中停止工作。

如果您想要以一种仍然是同步的方式但仍然不会阻塞的方式来执行此操作，则应使用async / await，还可能使用一些基于Promise的ajax，例如新的Fetch API

async function foo() {
  var res = await fetch(url)
  console.log(res.ok)
  var json = await res.json()
  console.log(json)
}

当用户导航离开或关闭页面时， Edit chrome正在处理“ 禁止在页面关闭中同步XHR” 。 这涉及到卸载，卸载，页面隐藏和可见性更改。

如果这是您的用例，那么您可能想看看navigator.sendBeacon而不是

页面也可能会禁用带有HTTP标头或iframe的allow属性的同步请求

---

#10楼

首先，我们应该了解何时使用$ .ajax和何时使用$ .get / $。post

当我们需要对ajax请求进行低级控制时，例如请求标头设置，缓存设置，同步设置等，那么我们应该选择$ .ajax。

$ .get / $。post：当我们不需要对ajax请求进行低级控制时，只需简单地将数据获取/发布到服务器即可。 是的简写

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

因此我们不能在$ .get / $。post中使用其他功能（同步，缓存等）。

因此，对于对ajax请求的低级控制（同步，缓存等），我们应该使用$ .ajax

 $.ajax({
     type: 'GET',
      url: url,
      data: data,
      success: success,
      dataType: dataType,
      async:false
    });

---

#11楼

这是我对jQuery的ASYNC请求的简单实现。 希望对任何人有帮助。

var queueUrlsForRemove = [
    'http://dev-myurl.com/image/1', 
    'http://dev-myurl.com/image/2',
    'http://dev-myurl.com/image/3',
];

var queueImagesDelete = function(){

    deleteImage( queueUrlsForRemove.splice(0,1), function(){
        if (queueUrlsForRemove.length > 0) {
            queueImagesDelete();
        }
    });

}

var deleteImage = function(url, callback) {
    $.ajax({
        url: url,
        method: 'DELETE'
    }).done(function(response){
        typeof(callback) == 'function' ? callback(response) : null;
    });
}

queueImagesDelete();

---

#12楼

因为不赞成使用XMLHttpReponse同步操作，所以我提出了以下包装XMLHttpRequest解决方案。 这允许有序的AJAX查询，而本质上仍然是异步的，这对于一次性CSRF令牌非常有用。

它也是透明的，因此jQuery之类的库将无缝运行。

/* wrap XMLHttpRequest for synchronous operation */
var XHRQueue = [];
var _XMLHttpRequest = XMLHttpRequest;
XMLHttpRequest = function()
{
  var xhr   = new _XMLHttpRequest();
  var _send = xhr.send;

  xhr.send = function()
  {
    /* queue the request, and if it's the first, process it */
    XHRQueue.push([this, arguments]);
    if (XHRQueue.length == 1)
      this.processQueue();
  };

  xhr.processQueue = function()
  {
    var call = XHRQueue[0];
    var xhr  = call[0];
    var args = call[1];

    /* you could also set a CSRF token header here */

    /* send the request */
    _send.apply(xhr, args);
  };

  xhr.addEventListener('load', function(e)
  {
    /* you could also retrieve a CSRF token header here */

    /* remove the completed request and if there is more, trigger the next */
    XHRQueue.shift();
    if (XHRQueue.length)
      this.processQueue();
  });

  return xhr;
};

---

#13楼

这是我的“ Thread ”名称空间：

var Thread = {
    sleep: function(ms) {
        var start = Date.now();

        while (true) {
            var clock = (Date.now() - start);
            if (clock >= ms) break;
        }

    }
};

这就是我所说的：

var d1 = new Date();
console.log('start ' + d1.toLocaleTimeString());
Thread.sleep(10000);
var d2 = new Date();
console.log('end ' + d2.toLocaleTimeString());

如果查看控制台，我们将得到以下结果：

start 1:41:21 PM
end 1:41:31 PM

---

#14楼

您可以通过调用来将jQuery的Ajax设置置于同步模式

jQuery.ajaxSetup({async:false});

然后使用jQuery.get( ... );执行Ajax调用jQuery.get( ... );

然后再打开一次

jQuery.ajaxSetup({async:true});

我想它的工作原理与@Adam所建议的相同，但对于希望将其jQuery.get()或jQuery.post()重新配置为更复杂的jQuery.ajax()语法的人来说，这可能会有所帮助。