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 出于安全方面的考虑，不允许跨域调用其他页面的对象，所以在跨域调用数据接口时，我们需要注意跨域的问题。
关于跨域请大家自行了解相关的内容，我们也会在后面的教程中说明这个问题。
