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

这是一个动态更新的示例图表： 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调用。 您需要执行一个相当基本的继续传递代码转换，在您希望异步调用的点之后将代码转换为传递给异步调用的函数。 “ 延续 ”仅仅意味着“从给定的一点开始计算的其余部分”。 在代码示例中，这是对series.addPoint的调用。 这种模式是你改变：

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

成：

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

如果（2）在原始函数中返回一个值，则还必须使用延续传递样式重写对f的调用，添加一个额外的参数来保持延续。

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

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

这是要点，将异步调用的ajaj和螺栓包装成一个名为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版本，通常具有更多function。 如果您正在为生产站点执行任何复杂操作，请考虑采用一个。 如果您正在使用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() ，你可以搞清楚。

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将切掉任何小数点。

请参阅随机文档