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

Question

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

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

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

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

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

<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

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

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

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

$ .ajax ({url: "test.html", context: document.body, success: function() { // make ui editable }});

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

$ .ajax ({URL: "test.html", контекст: document.body, успех: функция() {

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

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

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

     }}); 

    }}); 

}});

Answer 2

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

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

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