Разница между синхронным и асинхронным Ajax-запросом

Question

Кроме этого, если после вызова ajax есть некоторый код, то в асинхронном режиме он выполняется первым.В синхронном режиме выполняется один за другим в коде.

Answer 1

<h2>Synchronous Request</h2>

<p id="demo"></p>

<script>
        var xmlhttp = new XMLHttpRequest();

        alert("after creating XMLHttpRequest ");
        xmlhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                var myObj = JSON.parse(this.responseText);
                alert("In function");
                document.getElementById("demo").innerHTML = "Name from JSON Data : " + myObj.name;
            }
        };
        xmlhttp.open("GET", "emp.json", false);//Synchronous 
        xmlhttp.send();
        alert("after send");


    </script>

---

Для лучшего понимания я использовал оповещение, чтобы знать, как происходят синхронные и асинхронные запросы, установитекак правда и вижу

Answer 2

Синхронный Ajax-запрос : блокирует цикл обработки событий, что означает, что вы / браузер не можете выполнять другие действия (нажатие кнопки, загрузка изображений и т. Д.)

Асинхронный Ajax-запрос : Он не блокирует цикл обработки событий и не может выполнять другие действия во время обработки ajax.

Цикл событий : механизм в JavaScript для выполнения асинхронных операций.Для деталей вы можете погуглить его.

Answer 3

По сути, Asynchronous запросы не имеют большого значения для других кодов, если они уже выполнены или нет.Он выполняется только в том случае, если он уже получил ответ от того, откуда вы отправили запрос.

Ajax-запросы по своей природе Asynchronous, но его можно установить равным Synchronous, таким образом, имея коды перед ним,сначала выполнить.

// Примечание: Synchronous ajax-запрос уже объявлен устаревшим в jquery, лучше использовать обещания.

Answer 4

Это верно.Примеры для Javascript:

var xhr = new XMLHttpRequest();
var button = document.getElementById('button');

xhr.open('GET', '/', true);

xhr.send(); // (1)

xhr.onreadystatechange = function() { // (3)
  if (xhr.readyState != 4) return;

  button.innerHTML = 'Ready!';

  if (xhr.status != 200) {
    alert(xhr.status + ': ' + xhr.statusText);
  } else {
    alert(xhr.responseText);
  }

}

button.innerHTML = 'Loading...'; // (2)
button.disabled = true;

Если в xhr.open () есть третий аргумент и он равен true , тогда запрос будет асинхронным .Это означает, что после вызова xhr.send () код в (1) не «зависает», но все еще выполняется, строка (2) выполняется, и результат запроса xhr получает после изменения состоянияevent (3).

Я немного изменил пример кода из этой статьи: https://javascript.info/xmlhttprequest

Answer 5

Синхронный (асинхронный: ложный) - сценарий останавливается и ждет, пока сервер отправит ответ, прежде чем продолжить.В некоторых ситуациях синхронный Ajax является обязательным.В стандартных веб-приложениях взаимодействие между клиентом и сервером является синхронным.Это означает, что одно должно происходить за другим.Синхронная часть:

$.ajax({
         url: "file.php",
         type: "POST",
         async: false,
         success: function(data) {
                // write something awesome in response data part
         }
      });

Асинхронная часть:

$.ajax({
         url: "file.php",
         type: "POST",
         async: true,
         success: function(data) {
                // write something awesome in response data part
         }
      });

Вот и все.Обычно люди используют асинхронный режим, когда им нужно отправить запрос по завершении первого запроса.Значит, ваши запросы будут работать один за другим, не все запросы будут отправлены сразу.Вместо этого при синхронных вызовах ajax все ваши запросы будут выполняться синхронно.