Как я могу заставить jQuery выполнять синхронный, а не асинхронный Ajax-запрос?

Question

У меня есть виджет JavaScript, который предоставляет стандартные точки расширения. Одним из них является функция beforecreate. Он должен вернуть false, чтобы предотвратить создание элемента.

Я добавил Ajax-вызов в эту функцию, используя jQuery:

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 в функции-матери, а не в обратном вызове. Есть ли способ выполнить синхронный AJAX-запрос с помощью jQuery или любого другого API в браузере?

Answer 1

Во-первых, мы должны понять, когда мы используем $ .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
    });

Answer 2

Поскольку синхронная операция 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;
};

Answer 3

это моя простая реализация запросов ASYNC с помощью jQuery. Надеюсь, это кому-нибудь поможет.

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

Answer 4

Это мое пространство имен « 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