Ajax的作用，主要是实现局部刷新。
通过老大哥告知，Ajax接口可以使用一言网站的，所以自己就练了一下子。
本文所有用到的接口都来自一言网站：https://hitokoto.cn/api
通过网站公告可知，一言网站的JSON数据格式如下：
| id | 本条一言的id。 可以链接到https://hitokoto.cn?id=[id]查看这个一言的完整信息。 |
| hitokoto | 一言正文。编码方式unicode。使用utf-8。 |
| type | 类型。请参考第三节参数的表格。 |
| from | 一言的出处。 |
| creator | 添加者。 |
| created_at | 添加时间。 |
| 注意：如果encode参数为text，那么输出的只有一言正文。 | |
接口类型如下：
https://v1.hitokoto.cn/（从7种分类中随机抽取）
https://v1.hitokoto.cn/?c=b （请求获得一个分类是漫画的句子）
https://v1.hitokoto.cn/?c=f&encode=text （请求获得一个来自网络的句子，并以纯文本格式输出）
既然我们知道了接口，那么就让我们来分析一下如何利用Ajax使用这个接口。
首先先要确定html页面需要如何显示数据，使用列表、表格、还是lable标签呢？
这里我们采用了简单的table(表格)标签，注意，在使用表格的时候tr表示表格中的行，td表示表格中的单元格，tr需要和td嵌套使用即：<tr><td></td></tr>
既然我们确定了HTML页面使用表格标签来显示数据，那么接下来我们编写JS代码。
编写JS代码，需要创建一个入口，然后在入口中编写Ajax的请求函数，
最后，通过获取标签元素来给HTML页面进行传值。
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax使用一言接口</title>
<script src="../JS/jquery-1.12.4.min.js"></script>
<script>
function get_Ajax(){
$.get(‘https://v1.hitokoto.cn/‘,{},function(response){
$(‘#td1‘).html(response.id);
$(‘#td2‘).html(response.hitokoto);
$(‘#td3‘).html(response.type);
$(‘#td4‘).html(response.from);
$(‘#td5‘).html(response.creator);
$(‘#td6‘).html(response.created_at);
},‘JSON‘);
}
function Ajax_start(){
setInterval(get_Ajax,5000);
}
</script>
<style>
table,tr,td{
border: 4px solid yellowgreen;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr><td>ID:</td><td id="td1">无</td></tr>
<tr><td>正文：</td><td id="td2">无</td></tr>
<tr><td>类型：</td><td id="td3">无</td></tr>
<tr><td>出处：</td><td id="td4">无</td></tr>
<tr><td>添加者：</td><td id="td5">无</td></tr>
<tr><td>添加时间：</td><td id="td6">无</td></tr>
</table>
<input type="button" value="开始Ajax请求" onclick="Ajax_start()">
</body>
</html>