JS：Ajax使用原生XMLHttpRequest对象来请求服务器访问json数据
data.json的数据
{"user":"xiaozhi","age":19,"date":"2019-09-23T02:56:42.391Z","salary":[1500,2000,3500,4200,5100]}
以下是代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// js 里XMLHttpRequest类似于python里的requests、urlib
function getXHR(){
if(window.XMLHttpRequest){
return new window.XMLHttpRequest()
}else{
// 解决微软的特殊情况
new window.ActiveXObject('Microsoft.XMLHTTP')
}
}
// 异步请求服务器数据函数
function jsonData(){
var xhr = getXHR()
xhr.open('GET', 'data.json')
xhr.send(null)
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
// 得到服务器返回的json字符串
resp = xhr.responseText
console.log(resp)
htmlText = ""
// 解析字符串为json对象
jsonObj = JSON.parse(resp)
console.log(jsonObj)
// 组织显示html格式
htmlText = '<tr><td>' + jsonObj.user + '</td></tr>'
document.getElementById('userData').innerHTML = htmlText
htmlText = '<tr><td>' + jsonObj.age + '</td></tr>'
document.getElementById('ageData').innerHTML = htmlText
htmlText = '<tr><td>' + jsonObj.date + '</td></tr>'
document.getElementById('dateData').innerHTML = htmlText
// 下面这行代码有一点需要注意，就此json文件来说，salary里面有好几个值，如果想要取其中一个值，可以用索引的方式来实现，
// 比如想取第三个值，在salary后面加上第三个值得索引就可以了，就像这样：
// htmlText = '<tr><td>' + jsonObj.salary[2] + '</td></tr>'
htmlText = '<tr><td>' + jsonObj.salary + '</td></tr>'
document.getElementById('salaryData').innerHTML = htmlText
}
}
}
</script>
</head>
<body>
<input type="button" value="加载" οnclick="jsonData()"/>
<table border="1">
<thead>
<tr><th>用户名</th></tr>
</thead>
<tbody id='userData'></tbody>
</table>
<table border="2">
<thead>
<tr><th>年 龄</th></tr>
</thead>
<tbody id='ageData'></tbody>
</table>
<table border="3">
<thead>
<tr><th>日 期</th></tr>
</thead>
<tbody id='dateData'></tbody>
</table>
<table border="4">
<thead>
<tr><th>工 资</th></tr>
</thead>
<tbody id='salaryData'></tbody>
</table>
</body>
</html>
运行结果截图是这样子的：
这张图salary取所有值的结果，如果用索引取其中一个值，它是这样的：