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>