开发者学堂课程【Ajax 前端开发入门与实战：解析 json 数据格式】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/595/detail/8532
解析 json 数据格式
解析 json 数据格式的案例：
一．获取学生信息接口
地址 |
/server/getStudent.php |
作用描述 |
获取所以学生信息 |
请求类型 |
Get 请求 |
参数 |
无 |
返回数据格式 |
json 格式 |
返回数据说明 |
name 为姓名 age 为年龄 sex 为性别，样例数据如下 { { “name”：张三 “age”：19 “sex”:男 } } |
（1）代码展示：
<script type="text/javascript">
window.onload =function(){
var xhr = new XMLHttpRequest();
/*get 请求*/
xhr.open("get","./server/getStudents.php",true);
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status == 200){
/*responseText 只是一个字符串，只有字符串转化为对象后，才可以使用某些属性，这样方便进行我们对值的获取*/
var result=xhr.responseText;
/*对象的转化*/
result=JSON.parse(result);
var newHtml =
document.getElementById(“container”).innerHTML;
console.log(result);
for（var i=0；i<result.length;i++）{
var item = result[i];
var name =item.name;
var sex = item.sex;
var age = item.age;
console.log(name,sex,age);
Var tempHtml = 〝<td><th>〞+name+〝<td><th>〞
+age+〝<td><th>〞+sex+〝<td></tr>〞;
newHtml +=tempHtml;
}
document.getElementById(“container”).innerHTML = newHtml;
console.log(newHtml);
}
}
}
};
}；
</script>
/*网页控制台上就是数组对象,每一个元素都是对象*/
<div>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</table>
</div>
（2）网页展示：
使用 json 数据格式更加方便，快速。
