如何使用JavaScript与Web服务器交互

Question

如何使用JavaScript与Web服务器交互

javascripthtmlserverside-javascript

4

我正在尝试使用AppWeb开源Web服务器开发交互式聊天应用程序。我需要一些机制，使Web服务器能够向客户端发送更新的消息，以便当远程用户发送消息时，客户端会自动更新。

有一些方法可以使用HTML5 Web Sockets和服务器发送事件来实现这一点。但是我们只需要在HTML和JavaScript中实现它，而不是HTML5。

因此，我需要一些轮询机制，以保持对我的Web服务器进行新事件的轮询。

那么，我应该如何使用Sockets在Javascript中编写轮询机制？在服务器端应该如何实现？

谢谢！

- Puneet

2个回答

2

服务器向客户端发送消息的另一种技术是使用iframe连接到PHP脚本（或者您在服务器端使用的任何其他技术），该脚本不会关闭连接。然后，PHP脚本会在必须通知客户端有关某些内容时发送JavaScript消息。每次发送完消息后，服务器都会刷新输出流以确保数据真正传输到客户端，并且不会被某些输出缓冲区缓存。下面是一个小例子，展示了在iframe中加载的PHP脚本的基本代码（未经测试和不完整的，仅用于展示基础知识）：

<html>
  <body>
    <script type="text/javascript">

      function receiveMsg(data)
      {
          // Do something with the data, for example send it to some function
          // in the parent frame (Where your chat application lives)
      }

      <?php

      while (true) // You may also implement some abort state which should
                   // be checked here
      {
          $data = waitForData(); // This is your magic function on the server
                                 // which waits for data to be send to the client
          echo "receiveMsg('" . $data . "');"; // Let's say data is just a string.
                                             // You may want to use JSON instead
          flush();
      }
      ?>
    </script>
  </body>
</html>

这种方法的优点是不依赖轮询，因此您无需每隔 x 秒向服务器发送请求。当服务器端正确处理时，由一个用户发送的消息会尽可能快地被其他用户接收，而不是在 x 秒后。缺点是对于每个聊天用户都需要一个永久的 HTTP 连接。但这可能需要比每个聊天用户每分钟进行几十个完整的 HTTP 请求更少的服务器资源。

- kayahr

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user57508 · Accepted Answer

已经有一些例子存在了... 根据服务器端的情况，你可以选择 java-hello-world 或 php-hello-world 等等...

如果你不能使用 websocket，你可以通过旧方法，使用 window.setInterval 创建一个时间间隔，并使用例如 $.ajax() 从服务器拉取数据。 ~~我不知道双向连接 (websocket) 的其他替代方案...~~ 参见 kayahrs answer。

根据您的要求：
$.ajax() 是使用 jQuery 进行 xhr 的方式。基本上，它会向服务器发送异步请求，并返回 xml 或 json 或文本等（任何格式）。当该请求返回时，支持的事件处理程序将被触发，您可以对响应做出反应。您也可以使用普通的 xhr，但是处理原始 xhr 有点棘手。
jQuery 支持一些 $.ajax() 的简写重载，例如 $.getJSON()，$.get()，...

示例实现：

$.get("test.cgi", function(data){
    alert("Data Loaded: " + data);
});