AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX技术 不需要刷新页面的情况下，就可以产生局部刷新的效果
最初AJAX技术操作的是XML标签，现在绝大多数情况下操作的是JSON格式的字符串
// json对象
// 注意：对象的属性名，必须要双引号引起来
let obj = {
"name": "张三",
"age": 20,
"gender": "男"
}
// json数组
let arr = [
{
"name": "张三",
"age": 20,
"gender": "男"
},
{
"name": "李四",
"age": 22,
"gender": "女"
}
]
<script>
/* readyState 是读取状态：
0: 请求未发送
1：服务器连接已建立（请求已经发送）
2：请求已接收（服务器已经接收到该请求）
3：请求处理中（服务器正则准备你要的数据）
4：请求已完成，且响应已就绪
status 是响应的状态码：
200：成功
404：请求资源错误
500：服务器端错误 */
console.log('--------------------------------------');
// 1.创建xhr对象 (原生ajax对象)
let xhr = new XMLHttpRequest()
// 2.初始化请求 ,需要明确请求方式和请求地址（GET请求，POST请求 PUT DELETE）常用的是：GET请求，POST请求
// 请求得知包括：真是的后台接口，本地的JSON文件，注意，请求本地的JSON文件只支持GET方式
xhr.open('GET', './data/stus.json')
// 3.发送请求
xhr.send()
// 4.注册一个onreadystatechange 事件 监听回传的值
xhr.onreadystatechange = function () {
// 状态值变成2，表示请求发送成功
// 状态值变为3，表示服务器成功接收到请求，并开始响应
// 状态值变成4，表示服务器响应完成
console.log(xhr.readyState);
// 判断状态是否完成
if (xhr.readyState === 4) {
// 判断状态码是否为200
if (xhr.status === 200) {
// JSON.parse()方法 用于将JSON格式的字符串转为js对象
let kbs = JSON.parse(xhr.responseText)
// 循环数组
kbs.forEach(k => {
// 每个对象创建一个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>
