如何使用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);
}

如何使用AJAX重寫load以從另一個網頁獲取x和y ，而不是在函數中生成值？

Answer 1

我認為您想要的是樣本load方法，但是將設置x和y替換為AJAX調用。 您需要執行一個相當基本的連續傳遞代碼轉換，將要異步調用的點之后的代碼轉換為傳遞給異步調用的函數。 “ 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(),
        ));

Answer 2

我認為您想要遞歸調用setTimeout ：

function update(series){
    var x = (new Date()).getTime(), // current time
        y = Math.random();
    series.addPoint([x, y], true, true);
    setTimeout(function() { update(series); }, 1000);
}

接着：

load: function() {            
    var series = this.series[0];
    update(series);
}

還是更好，嘗試這樣的事情：

function update(){
    var series = yourChart.series[0];
    var x = (new Date()).getTime(), // current time
        y = Math.random();
    series.addPoint([x, y], true, true);
    setTimeout(update, 1000);
}

接着：

load: update

編輯

如果您想獲取一個隨機數作為整數，則應執行以下操作（取決於所需數字的范圍）

Math.floor(Math.random() * 10)

random將返回范圍為[0，1）的數字，並且floor將截去任何小數點。

查看隨機文件