我想你想要什么样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(),那么你可以弄清楚。
header('Content-type: application/json');
echo json_encode(
array(
time(),
rand()/getrandmax(),
));