highcharts ajax java_Ajax 请求数据接口 | Highcharts 使用教程

Ajax 是一种不需要刷新页面就可以与服务器交换数据的方法。

一、jQuery 中 Ajax 相关的函数

在 jQuery 中，有三种 Ajax 相关的方法，分别是：ajax、get、post。

1、jQuery.ajax

统一的发送 Ajax 请求函数，简单的使用示例如下：$.ajax({

url: '请求地址',

type: 'GET', // 请求类型，常用的有 GET 和 POST

data: {

// 请求参数

},

success: function(data) { // 接口调用成功回调函数

// data 为服务器返回的数据

}

});

2、jQury.get

发送 get 请求，是 ajax 方法的简写方式。$.get(url, {

// 参数

}, function(data) {

// data 为服务器返回的数据

});

3、jQuery.post

发送 post 请求，是 ajax 方法的简写方式。$.post(url, {

// 参数

}, function(data) {

// data 为服务器返回的数据

});

二、实例说明请求数据并创建图表

下面我们用具体的实例来说明这个过程：

1、 创建服务器接口<?php

// 指定返回格式为 JSON

header("Content-type: text/json");

// 获取当前时间，PHP 时间戳是秒为单位的，JS 中则是毫秒，所以这里乘以 1000

$x = time() * 1000;

// y 值为随机值

$y = rand(0, 100);

// 创建 PHP 数组，并最终用 json_encode 转换成 JSON 字符串

$ret = array($x, $y);

echo json_encode($ret);

?>

2、 初始化图表var chart = null; // 定义全局变量

$(document).ready(function() {

chart = Highcharts.chart('container', {

chart: {

type: 'spline',

events: {

load: requestData // 图表加载完毕后执行的回调函数

}

},

title: {

text: 'Live random data'

},

xAxis: {

type: 'datetime',

tickPixelInterval: 150,

maxZoom: 20 * 1000

},

yAxis: {

minPadding: 0.2,

maxPadding: 0.2,

title: {

text: 'Value',

margin: 80

}

},

series: [{

name: '随机数据',

data: []

}]

});

});

3、 调用数据接口并更新图表/**

* Ajax 请求数据接口，并通过 Highcharts 提供的函数进行动态更新

* 接口调用完毕后间隔 1 s 继续调用本函数，以达到实时请求数据，实时更新的效果

*/

function requestData() {

$.ajax({

url: 'live-server-data.php',

success: function(point) {

var series = chart.series[0],

shift = series.data.length > 20; // 当数据点数量超过 20 个，则指定删除第一个点

// 新增点操作

//具体的参数详见：https://api.hcharts.cn/highcharts#Series.addPoint

chart.series[0].addPoint(point, true, shift);

// 一秒后继续调用本函数

setTimeout(requestData, 1000);

},

cache: false

});

}

三、注意事项

1、数据类型

注意请确保数据接口返回的数据是 JSON 对象的形式，如果返回的数据是 JSON 字符串，我们可以用 JS 转换一下，说明如下

图3-1 JS 类型及 JSON 转换

即在 JS 中，用 typeof 来判断类型，字符串类型为 "string"，对象类型为 "object"； 我们可以用 JSON.parse() 来将 JSON 字符串转换成 JSON 对象，用 JSON.stringify() 来将 JSON 对象转换成 JSON 字符串。

3、跨域问题

由 JavaScript 出于安全方面的考虑，不允许跨域调用其他页面的对象，所以在跨域调用数据接口时，我们需要注意跨域的问题。

关于跨域请大家自行了解相关的内容，我们也会在后面的教程中说明这个问题。