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

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) 

随机将返回范围[0，1）中的数字，楼层将切断任何小数点。

见random docs