// ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术 -->
// 第一步,创建ajax对象
let xhr=new XMLHttpRequest();
// 连接服务器:请求方法（get,post）,请求地址，异步（true）或同步(flase)
（ajax推荐使用异步请求,非阻塞，多个事件可以同步进行）
xhr.open('get','text.txt',true)
// 发送请求
xhr.send();
// 监控ajax请求到了哪一步 onreadystatechange
xhr.onreadystatechange=function(){
//请求状态码 readyState
if(xhr.readyState==4){
if (xhr.status==200) {
console.log(xhr.responseText)
}
}
}
请求状态码 readyState
从0到4发生变化
0：请求未初始化，还没有调用到open方法
1：服务器连接已建立，已调用send方法，正在发生请求
2：请求已接收，send方法完成
3：请求处理中
4：请求已完成，且响应已就绪
请求状态码：status数据成功到达客户端
200：‘OK’
404：‘未找到页面’
JSON // JSON语法规则
// 数据在 键/值 对形成保存中
// 数据由逗号分隔
// 键必须放在双引号中
// 字符串也必须放在双引号中
//最后一条数据后面不用加逗号
//JSON内不能写注释
//新建文件data.json {}开头
{
"name":"XXX",
"age":XXX,
"addr":"南京市，雨花台区，小行路"
}
//JSON值 可以是数字、字符串、逻辑值、数组、对象、null
[
{
"name":"XXX",
"age":XX,
"addr":"南京市，雨花台区，小行路",
"married":true,
"friends":["XX","XX"], //数组，在中括号中
"pet":{"name":"XX","type":"XX"} //对象，在大括号中
},
{
"name":"XX",
"age":XX,
"addr":"南京市，雨花台区，小行路",
"married":true,
"friends":["XX","XX"],
"pet":{"name":"XX","type":"X"}
}
]
3.请求mock中的json数据
Mock平台 虚拟接口
<script>
let xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if (xhr.status==200) {
console.log(xhr.responseText)
console.log(typeof xhr.responseText)//typeof判断对象类型
console.log(JSON.parse(xhr.responseText))
}
}
}
xhr.open('get','https://www.fastmock.site/mock/4dd754b03fd97d8f09bac1e1f0141b21/_JSON1019/user-kw33',true)
xhr.send();
</script>
[if !supportLists]4. [endif]渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
width: 500px;
border-collapse: collapse;
}
th,td{
border:red 1px solid;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
<th>宠物</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
let xhr=new XMLHttpRequest(); //第一步,创建ajax对象
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if (xhr.status==200) {
let mydata=JSON.parse(xhr.responseText)
console.log(mydata)
let mytbody=document.querySelector('tbody')
for (let i = 0; i < mydata.length; i++) {
let newtr=document.createElement('tr');
let newtd1=document.createElement('td');
newtd1.innerHTML=mydata[i].name
let newtd2=document.createElement('td');
newtd2.innerHTML=mydata[i].age
let newtd3=document.createElement('td');
newtd3.innerHTML=mydata[i].addr
let newtd4=document.createElement('td');
newtd4.innerHTML=mydata[i].pet.name
newtr.appendChild(newtd1);
newtr.appendChild(newtd2);
newtr.appendChild(newtd3);
newtr.appendChild(newtd4);
mytbody.appendChild(newtr)
}
}
}
}
xhr.open('get','https://www.fastmock.site/mock/4dd754b03fd97d8f09bac1e1f0141b21/_JSON1019/user-kw33',true)
xhr.send();
</script>
</body>
</html>
