![](/img/trans.png)
[英]How can I use PHP to fetch data from another website and store it in a MySQL database?
[英]How can I use AJAX to fetch data and store it in javascript variables?
这是一个示例动态更新的图表: 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
,而不是在函数中生成值?
我认为您想要的是样本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(),
));
我认为您想要递归调用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将截去任何小数点。
查看随机文件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.