php - 如何使用 AJAX 获取数据并将其存储在 javascript 变量中？

Question

这是一个动态更新的图表示例: http://www.highcharts.com/demo/dynamic-update

图表每秒更新一次，以日期作为 x 值，以随机数作为 y 值。

load: function() {            
    // set up the updating of the chart each second
    var series = this.series[0];
    setInterval(function() {
        var x = (new Date()).getTime(), // current time
            y = Math.random();
        series.addPoint([x, y], true, true);
    }, 1000);
}

如何重写 load 以使用 AJAX 从另一个网页获取 x 和 y，而不是在函数内生成值？

Answer 1

我认为您想要的是示例 load 方法，但将设置 x 和 y 的行替换为 AJAX 调用。您需要执行相当基本的 continuation-passing代码转换，将您想要异步调用的点之后的代码转换为传递给异步调用的函数。 “Continuation ”仅表示“从给定点向前计算的其余部分”。在代码示例中，这是对series.addPoint 的调用。其模式是您进行转换:

function f(...) {
    (1)
    result = sync(...);
    (2)
}

进入:

function f(...) {
    (1)
    async(..., function (result) {
          (2)
      });
}

如果 (2) 在原始函数中返回一个值，则对 f 的调用也必须使用延续传递风格重写，添加一个额外的参数来保存延续。

您应该做的另一件事是确保 PHP 脚本将数字对输出为有效的 JSON，或者作为两个数字的数组(可以在之后直接传递给 series.addPoint 调用)解析)，或作为具有属性“x”和“y”的对象。

请注意，由于网络通信的性质，数据可能无法及时到达，从而导致图表的间隔不规则。

要点如下，将异步调用的具体细节包装到名为 ajaj 的函数中。该示例假设浏览器支持 XMLHttpRequest 的必要标准和 JSON解析器。

/* Asynchronous Javascript And Json */
function ajaj(url, succeed, fail) {
    if (! fail) {
        fail = function() {};
    }
    var xhr = new XMLHttpRequest;
    xhr.open('GET', url);
    xhr.onreadystatechange = function() {
        if (xhr.readyState==4) {
            if (200 <= xhr.status && xhr.status < 300) {
                succeed(JSON.parse(xhr.responseText));
            } else {
                // error
                fail(xhr.status, xhr.statusText, xhr.responseText);
            }
        }
    };
    xhr.send();
    return xhr;
}

...

    url: '...',

    load: function() {
        // ensure only one data load interval is running for this object
        if (this.updateInterval) {
            return;
        }
        // set up the updating of the chart each second
        var series = this.series[0];

        this.updateInterval = setInterval(function() {
            ajaj(this.url, 
                 function(point) { // success
                     series.addPoint(point, true, true);
                 },
                 function(status, statusText, response) { // failure
                     ...
                 }
            );
        }, 1000);
    }

JS 库提供自己的 ajaj 版本，通常具有更多功能。如果您正在为生产站点执行任何复杂的操作，请考虑采用一种。例如，如果您使用 jQuery(如标签所示)，则可以使用 jQuery.get :

    load: function() {
        if (this.updateInterval) {
            return;
        }
        // set up the updating of the chart each second
        var series = this.series[0];

        this.updateInterval = setInterval(function() {
            jQuery.get(this.url, 
                 function(point, textStatus, jqXHR) { // success
                     series.addPoint(point, true, true);
                 }, 'json'
            );
        }, 1000);
    }

服务器端的事情非常简单。 time()返回 Unix 时间戳，rand()返回一个(不是非常)伪随机数(尽管对于演示来说已经足够好了)，并且 json_encode() ，好吧，你可以弄清楚。

<?php
header('Content-type: application/json');

echo json_encode(
        array(
            time(),
            rand() / getrandmax(),
        ));