Ajax 请求数据接口

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

关于 Ajax 相关的知识请参考 jQuery-Ajax、jQuery-AJAX - W3School 及 Ajax 教程

一、jQuery 中 Ajax 相关的函数

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

1、jQuery.ajax

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

$.ajax({
    url: '请求地址',
    type: 'GET',     // 请求类型，常用的有 GET 和 POST
    data: {          
        // 请求参数
    },
    success: function(data) { // 接口调用成功回调函数
        // data 为服务器返回的数据
    }
});

关于 jQuery.ajax 函数的详细使用请参考：jQuery 官方文档 及 jQuery Ajax ajax() 方法

2、jQury.get

发送 get 请求，是 ajax 方法的简写方式。

$.get(url, {
    // 参数
}, function(data) {
    // data 为服务器返回的数据
});

关于 jQuery.get 函数的详细使用请参考：jQuery 官方文档 及 jQuery Ajax get() 方法

3、jQuery.post

发送 post 请求，是 ajax 方法的简写方式。

$.post(url, {
    // 参数
}, function(data) {
    // data 为服务器返回的数据
});

关于 jQuery.post 函数的详细使用请参考：jQuery 官方文档 及 jQuery Ajax post() 方法

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

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

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 出于安全方面的考虑，不允许跨域调用其他页面的对象，所以在跨域调用数据接口时，我们需要注意跨域的问题。

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