AJAX：我如何解决需要同步请求的问题？

Question

我删除了一个以前提出的问题，现在再次更简洁地问我对问题有更多的理解。

我有一个页面，使用大量的AJAX，并更新和动态填充内容（表单元素和div从其他表单元素返回的文本）。

我真的需要能够强制用户等待，直到AJAX请求处理完毕（例如，在他们完成提交一些值的文本字段后），然后才能继续。从我收集使用同步请求可能会导致浏览器挂等问题...

我还需要一个JavaScript函数，执行多个AJAX函数调用，但我也需要他们一次执行一个。目前使用异步调用会产生不可预知的结果......也许我会以错误的方式解决这个问题。有很多的代码，所以很难提供一个简短的例子，但我会试试下面：

从下面（它本身插入一个Ajax函数）动态地添加更多的表单元素到页面if它是第一次输入已被编辑（第一次内容被写入数据库...随后它只会更新现有的数据库条目，我不需要添加额外的表单项）

<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。正如米哈伊尔所说，你应该真正了解到，它使事情变得更容易，更简单，更清洁。

我想我可以用类似的答案几乎回答你的两个问题。

就第一个问题而言，你是对的，做同步请求会在浏览器进程等待请求返回时锁定浏览器进程。你可以做的是做到这一点，当你等待结果返回或使其不可用时，UI的下一部分是不可见的。下面是一个可以做到这一点的ajax请求的例子：

$ .ajax（{url：“test.html”，context：document。body，success：function（）{ // make ui editable }}）;

同样，对于你的第二个问题，你可以窝他们：

$阿贾克斯（网址：{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

有可能是一个更好的AP去解决你的总体任务，但是可以不考虑以下几点：

1. 学习jQuery并将它用于你的ajax - 清理器语法，更易于阅读和调试。
2. 为了让你的用户等待ajax完成请求调用之前设置一个标志，并在ajax返回时取消设置。无论什么功能需要等待ajax答案，检查标志是否设置并中止函数调用。
3. 在开始新的通话之前等待先前的ajax完成听起来像是一个糟糕的设计。但无论如何要回答你的问题 - 你可以创建一个Ajax调用链，这样每次数据加载时，回调函数都会启动下一个Ajax调用。

再一次，所有这一切都通过jQuery更容易。 http://www.jquery.com/