怎么使用ajax获取数据,如何使用AJAX获取数据并将其存储在JavaScript变量中?

我想你想要什么样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(),

));

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值