AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）
AJAX技術(shù) 不需要刷新頁面的情況下，就可以產(chǎn)生局部刷新的效果
最初AJAX技術(shù)操作的是XML標簽炉峰，現(xiàn)在絕大多數(shù)情況下操作的是JSON格式的字符串
? // json對象
? ? ? ? // 注意：對象的屬性名畏妖，必須要雙引號引起來
? ? ? ? let obj = {
? ? ? ? ? ? "name": "張三",
? ? ? ? ? ? "age": 20,
? ? ? ? ? ? "gender": "男"
? ? ? ? }
? ? ? ? // json數(shù)組
? ? ? ? let arr = [
? ? ? ? ? ? {
? ? ? ? ? ? ? ? "name": "張三",
? ? ? ? ? ? ? ? "age": 20,
? ? ? ? ? ? ? ? "gender": "男"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? "name": "李四",
? ? ? ? ? ? ? ? "age": 22,
? ? ? ? ? ? ? ? "gender": "女"
? ? ? ? ? ? }
? ? ? ? ]
?<script>
? ? ? ? /* ? ?readyState 是讀取狀態(tài)：
? ? ? ? ? ?0: 請求未發(fā)送
? ? ? ? ? ?1：服務(wù)器連接已建立（請求已經(jīng)發(fā)送）
? ? ? ? ? ?2：請求已接收（服務(wù)器已經(jīng)接收到該請求）
? ? ? ? ? ?3：請求處理中（服務(wù)器正則準備你要的數(shù)據(jù)）
? ? ? ? ? ?4：請求已完成，且響應已就緒
? ? ? ? ? ? ? status 是響應的狀態(tài)碼：
? ? ? ? ? ?200：成功
? ? ? ? ? ?404：請求資源錯誤
? ? ? ? ? ?500：服務(wù)器端錯誤 */
? ? ? ? console.log('--------------------------------------');
? ? ? ? // 1.創(chuàng)建xhr對象 (原生ajax對象)
? ? ? ? let xhr = new XMLHttpRequest()
? ? ? ? // 2.初始化請求 ,需要明確請求方式和請求地址（GET請求讲冠，POST請求 PUT DELETE）常用的是：GET請求瓜客，POST請求
? ? ? ? // 請求得知包括：真是的后臺接口，本地的JSON文件竿开，注意谱仪，請求本地的JSON文件只支持GET方式
? ? ? ? xhr.open('GET', './data/stus.json')
? ? ? ? // 3.發(fā)送請求
? ? ? ? xhr.send()
? ? ? ? // 4.注冊一個onreadystatechange 事件 監(jiān)聽回傳的值
? ? ? ? xhr.onreadystatechange = function () {
? ? ? ? ? ? // 狀態(tài)值變成2，表示請求發(fā)送成功
? ? ? ? ? ? // 狀態(tài)值變?yōu)?否彩，表示服務(wù)器成功接收到請求疯攒，并開始響應
? ? ? ? ? ? // 狀態(tài)值變成4，表示服務(wù)器響應完成
? ? ? ? ? ? console.log(xhr.readyState);
? ? ? ? ? ? // 判斷狀態(tài)是否完成
? ? ? ? ? ? if (xhr.readyState === 4) {
? ? ? ? ? ? ? ? // 判斷狀態(tài)碼是否為200
? ? ? ? ? ? ? ? if (xhr.status === 200) {
? ? ? ? ? ? ? ? ? ? // JSON.parse()方法 用于將JSON格式的字符串轉(zhuǎn)為js對象
? ? ? ? ? ? ? ? ? ? let kbs = JSON.parse(xhr.responseText)
? ? ? ? ? ? ? ? ? ? // 循環(huán)數(shù)組
? ? ? ? ? ? ? ? ? ? kbs.forEach(k => {
? ? ? ? ? ? ? ? ? ? ? ? // 每個對象創(chuàng)建一個tr
? ? ? ? ? ? ? ? ? ? ? ? let tr = document.createElement('tr')
? ? ? ? ? ? ? ? ? ? ? ? let td1 = document.createElement('td')
? ? ? ? ? ? ? ? ? ? ? ? td1.innerHTML = k.name
? ? ? ? ? ? ? ? ? ? ? ? let td2 = document.createElement('td')
? ? ? ? ? ? ? ? ? ? ? ? td2.innerHTML = k.age
? ? ? ? ? ? ? ? ? ? ? ? let td3 = document.createElement('td')
? ? ? ? ? ? ? ? ? ? ? ? td3.innerHTML = k.gender
? ? ? ? ? ? ? ? ? ? ? ? tr.appendChild(td1)
? ? ? ? ? ? ? ? ? ? ? ? tr.appendChild(td2)
? ? ? ? ? ? ? ? ? ? ? ? tr.appendChild(td3)
? ? ? ? ? ? ? ? ? ? ? ? // 將tr追加到tbody中
? ? ? ? ? ? ? ? ? ? ? ? document.querySelector('tbody').appendChild(tr)
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
