其他分享
首页 > 其他分享> > AJAX使用XMLHttpRequest请求服务器json数据

AJAX使用XMLHttpRequest请求服务器json数据

作者：互联网

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>年&nbsp;&nbsp;&nbsp;&nbsp;龄</th></tr>
			</thead>
			<tbody id='ageData'></tbody>
		</table>
		
		<table border="3">
			<thead>
				<tr><th>日&nbsp;&nbsp;&nbsp;&nbsp;期</th></tr>
			</thead>
			<tbody id='dateData'></tbody>
		</table>
		
		<table border="4">
			<thead>
				<tr><th>工&nbsp;&nbsp;&nbsp;&nbsp;资</th></tr>
			</thead>
			<tbody id='salaryData'></tbody>
		</table>
		
	</body>
</html>

运行结果截图是这样子的：

在这里插入图片描述
这张图salary取所有值的结果，如果用索引取其中一个值，它是这样的：

在这里插入图片描述

标签：salary,jsonObj,XMLHttpRequest,json,xhr,htmlText,AJAX,nbsp
来源： https://blog.csdn.net/zZZxiaozhi/article/details/101214669