使用 Ajax 显示异步函数的值答案

【问题标题】：Using Ajax to display the values of an asynchronous function使用 Ajax 显示异步函数的值
【发布时间】：2013-04-19 00:02:18
【问题描述】：

我正在构建一个使用名为Chat.fetch() 的函数的项目；它是一个异步函数，从服务器中提取字符串数组。这是一个 ajax 函数，为了项目的目的已经定义了，我只需要正确调用它。我们还有另一个名为 Chat.display() 的函数，它接受一个字符串并在控制台上以项目符号的形式显示它。现在这就是我所拥有的：我收到一条错误消息，提示无法读取未定义的属性长度。所以我猜想.length 对于 superArray 是未定义的吗？目标是创建此函数并将其用作 Chat.fetch() 的回调函数。你们知道为什么我会收到这个 .length 错误吗？我很困惑。谢谢！

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="http://chatbuilder.hackreactor.com/ChatBuilder.js"></script>
  </head>
  <body>
    <script>


    Chat.guide.start();


    <h2>Borken Chat</h2>

    <input class="draft" type="text"/> <button class="send" disabled>send</button>



    <ul class="messages">

      <script>
    var list;
    var superArray=[];
    darray=function(superArray){
      var y=superArray.length;
      for(i=0;i<y;i++){
        Chat.display(x[i]);
      }
    }
    Chat.fetch(darray(list));
  </script>

    </ul>

  </body>

【问题讨论】：

你能发布一些代码吗？通常，这些值只是在 XMLHttpRequest 对象的响应文本中返回...
我们需要了解更多关于.fetch 或一般应用程序的信息。如果.fetch 返回一个promise（一个对象，它可能有一个.done 函数或.then 函数，或类似的东西）那么你可以链接它（Chat.fetch().done(chatbox.update_messages); 如果没有，那么确定是否有一个地方Chat，您可以在其中注册一个函数，以便在 .fetch 返回时调用。如果您只是转储 .fetch 函数的内容，这也会有所帮助。您的程序会一直运行代码，直到 .fetch 从服务器返回...然后将结果放入回调中，或保存在某处。

标签： javascript ajax callback

【解决方案1】：

这是一个使用 Ajax 的简单页面

<!DOCTYPE html>
<html>
 <head>
  <script>
   function loadXMLDoc()
   {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
    {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET","<<URL>>",true);
    xmlhttp.send();
  }
</script>
</head>
<body>

<div id="myDiv"><h2>Results will go here</h2></div>
<button type="button" onclick="loadXMLDoc()">Get Results</button>

</body>
</html>

看看 xmlHttp.responseText 用在什么地方？那就是你得到你的字符串的地方。

【讨论】：

【解决方案2】：

我不知道你有什么代码，但基本想法是这样的（使用 jQuery，不知道它是否在你的堆栈中）。这假设 Chat.fetch() 是同步的，否则您需要在完成时触发事件或使用承诺或其他东西。

messages = Chat.fetch();
for (i=0; i<messages.length; i++) {
      $('#chat-window').append( '<br>' + messages[i] );
}

【讨论】：

根据描述，.fetch 实际上保证是异步的，除非聊天应用程序做错了。