AJAX: как мне обойти проблему необходимости синхронных запросов?

Question

Я удаляю ранее заданный вопрос и спрашиваю более кратко, теперь, когда у меня есть немного большее понимание проблемы.

У меня есть страница, которая использует много AJAX и обновляется и динамически заполняется содержимым (элементы формы и элементы div с текстом, возвращаемым из другого элемента формы).

Мне действительно нужно иметь возможность заставить пользователей ждать обработки запросов AJAX (например, после того, как они заполнили текстовое поле, в котором были представлены некоторые значения), прежде чем они продолжат.Из того, что я собрал, использование синхронных запросов может вызвать проблемы с зависанием браузера и т. Д.

Мне также нужно иметь функцию javascript, которая выполняет несколько вызовов функции AJAX, но мне также нужно, чтобы они выполнялись по одному за раз.В настоящее время использование асинхронных вызовов приводит к непредсказуемым результатам ... возможно, я поступаю неправильно.В нем много кода, поэтому сложно привести короткий пример, но я попробую ниже:

Снизу (который сам вставляется функцией Ajax) динамически добавляет больше элементов формы встраницы, если это первый раз, когда ввод был отредактирован (в первый раз содержимое записывается в базу данных ... впоследствии он просто обновит существующую запись в БД, и мне не нужно добавлять дополнительные элементы формы)

   <form name='talkItemForm' id='talkItemFrom-<?php print $_POST[talkItemID]; ?>' class='talkItemForm' method='post'>

   <input type='hidden' id='talkItemID' name='talkItemID' value='<?php print $_POST[talkItemID]; ?>'><input type='hidden' id='talkID' name='talkID' value='<?php print $_POST[talkID]; ?>'>

   <input type='text' name='talkItemInput' id='talkItemInput' value='New Topic...'  onblur=" updateTalkItem(this.parentNode, '<?php print $_POST[talkID]; ?>', '<?php print $_POST[talkItemID]; ?>'); isNewTalkItem('<?php print $_POST[talkID]; ?>', '<?php print $_POST[talkItemID]; ?>', '<?php print generateTalkItemID()+1; ?>','<?php print generateNoteID(); ?>'); "/>

   </form>

Вызывает:

   function isNewTalkItem (talkID, talkItemID, newTalkItemID, newNoteID){

      var url = "./wp-content/themes/twentyten/addBelowIfNew.php";

      var poststr = "talkItemID=" + talkItemID;

      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
            // set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }

      http_request.onreadystatechange = function(){


           if (http_request.readyState == 4) {
               if (http_request.status == 200 || http_request.status == 0) {

                  result = http_request.responseText;

        //following code will note execute if this is not the first time this field has been edited... 
        if (result) {

                        // call to AJAX function that inserts a new <form>
            newNote(newNoteID, talkItemID);

                        // another call to AJAX function that inserts a new <form>
            newTalkItem(talkItemID, talkID);

        }

               } else {
                  alert('There was a problem with the request.');
               }

           }

      }    

      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", poststr.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(poststr);

Answer 1

Может быть лучший подход к решению вашей общей задачи, но можно сделать несколько замечаний:

1. Изучите jquery и используйте его для вашего синтаксиса ajax-cleaner, легче читать и отлаживать.
2. Чтобы пользователи ожидали завершения работы ajax, установите флаг перед запросом вызова и снимите его, когда ajax вернется.Независимо от того, какая функциональность должна ждать ответа ajax, проверьте, установлен ли флаг, и отмените вызов функции.
3. Ожидание завершения предыдущего ajax перед началом нового вызова звучит как плохой дизайн.но в любом случае, чтобы ответить на ваш вопрос - вы можете создать цепочку вызовов ajax, чтобы при каждой загрузке данных функция обратного вызова запускала следующий вызов ajax.

Опять же, все это намного прощечерез jquery.http://www.jquery.com/

Answer 2

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

Я думаю, что могу ответить на оба ваших вопроса с одинаковыми ответами.

Что касается первого вопроса, то вы правы: синхронные запросы блокируют процесс браузера, пока он ожидает возврата. То, что вы можете сделать, это сделать так, чтобы следующая часть пользовательского интерфейса была невидимой, пока вы ожидаете возвращения результатов, или сделать ее недоступной для редактирования. Вот пример запроса ajax, который может это сделать:

$. Ajax ({url: "test.html", контекст: document.body, success: function () { // сделать интерфейс редактируемым }});

Точно так же, для вашего второго вопроса, вы можете просто вложить их:

$. Ajax ({url: "test.html", контекст: document.body, success: function () {

$.ajax({ url: "test.html", context: document.body, success: function(){

      $.ajax({ url: "test.html", context: document.body, success: function(){

          $(this).addClass("done");

      }});

   }});

}});