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

2019-09-23 17:43:54 阅读：263 来源： 互联网

标签：salary jsonObj XMLHttpRequest json xhr htmlText AJAX nbsp

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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