Как мне запросить переменную с веб-сервера, используя AJAX?

У меня есть цикл в моем 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)

3 ответа

Вы можете использовать WebSockets, как советует Майк В.

Также вы можете написать скрипт на вашем сервере python, который возвращает JSON при его вызове, а затем иметь нужные вам переменные и их значения в файле JSON. Это будет поддерживаться для всех браузеров, а не только для современных, как того требуют WebSockets.

Вот реализация 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']]);

?>

Взгляните на WebSockets, которые позволяют серверу отправлять сообщение в браузер, когда он этого хочет, после установления соединения. Вы обрабатываете входящее сообщение с помощью обработчика событий Javascript, что позволяет избежать необходимости непрерывного опроса.

WebSockets поддерживаются всеми основными браузерами, включая IE10. Конечно, вы должны убедиться, что ваше серверное приложение также может поддерживать WebSockets.

Другие вопросы по тегам