如何使用 AJAX 从网络服务器请求变量？答案

【问题标题】：How do I request a variable from the webserver using AJAX?如何使用 AJAX 从网络服务器请求变量？
【发布时间】：2013-06-14 04:48:26
【问题描述】：

我的 JavaScript 中有一个循环，它不断检查变量 EventCounter，如果 eventcounter 为零，那么它会继续执行一个操作，然后将其递增 ++，然后它什么都不做，直到该变量发生变化，这是代码：

EventCounter = {{eg.globals.EventCounter}};      

for(var i = 0; i < n; ++i) {
                r = rects[i];
                ctx.strokeRect((r.x*sc)|0,(r.y*sc)|0,(r.width*sc)|0,(r.height*sc)|0);
                window.rects = rects[i];                    
                //console.log(EventCounter);
                if (EventCounter === 0) {               
                    console.log("event counter is" + EventCounter)
                    //setTimeout( function () {document.getElementById("sb").click()}, 5000) 
                    EventCounter++
                    console.log("event counter is now " + EventCounter);                            
                }

            }
        }

现在 EventCounter 全局变量从网络服务器（它是一个 Python 网络服务器和它的一个 Python 变量）获取它的值。

但我的问题是如何检测到网络服务器上的变量已更改？一个ajax请求对吗？我将如何请求变量值以检测它是否已更改，以便循环可以再次运行？ (**服务器与PHP不兼容)

【问题讨论】：

AJAX 请求肯定会执行此操作，但我希望您不建议连续轮询服务器以获取此信息。您还应该查看 setInterval 以减少轮询频率
好吧，为了想知道它是如何使用 AJAX 完成的，可以说 websockets 不是一个选项。我该怎么办？

标签： javascript python ajax variables webserver

【解决方案1】：

看看WebSockets，它允许服务器在建立连接后随时向浏览器发送消息。您使用 Javascript 事件处理程序处理传入的消息，从而避免需要连续轮询。

所有主流浏览器都支持 WebSocket，包括 IE10。当然，您必须确保您的服务器应用程序也可以支持 WebSockets。

【讨论】：

【解决方案2】：

您可以像 Mike W 建议的那样使用 WebSockets。

您还可以在您的 python 服务器上编写一个脚本，在调用它时返回 JSON，然后在 JSON 文件中包含您想要的变量及其值。这将被所有浏览器支持，而不仅仅是像 WebSockets 这样的现代浏览器需要。

【讨论】：

【解决方案3】：

这是一个 jQuery 实现，它每 1000 毫秒轮询一次服务器脚本并显示结果。您的典型响应时间 + 浏览器处理时间应该大大少于您的轮询间隔，否则您的请求可能会备份。

Javascript：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>eventCounter</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script type="text/javascript">

            var interval = setInterval(function() {
                                    // this is where your ajax call is made.
                $.ajax('geteventcounter.php', {
                  cache: false,
                  dataType:'json',
                  success: function(data) {
                                            // do your browser-side processing here.
                    $('#eventCounter').text(data.eventcounter);
                  }

                });
            }, 1000);            
        </script>
    </head>
    <body>
<p>eventCounter is <span id=eventCounter></span></p>
    </body>
</html>

服务器端 PHP： 对于这个例子，使用一个会话变量，它在每次请求时递增并返回一个 JSON 字符串。

<?php
session_start();
    // initialise counter, or increment it.
if (isset($_SESSION['eventcounter'])) {
    $_SESSION['eventcounter']++;
} else {
    $_SESSION['eventcounter'] = 0;
}
    // set output mime type
header("ContentType: application/json");

    // copy session variable to a new array, convert to JSON and send.
echo json_encode(['eventcounter' => $_SESSION['eventcounter']]);

?>

【讨论】：

服务器与php不兼容
您询问了如何使用 AJAX 请求变量。我给了你一个例子，为了完整起见，我提供了我用来测试它的 PHP 脚本。这不应该是最终解决方案 - 您需要根据自己的需要对其进行调整，并自己将其提升到生产标准。