JSON相关介绍:
JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快,更易解析。
JSON 是轻量级的文本数据交换格式。
JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。
由于这种相似性,无需解析器,JavaScript 程序能够使用内建的 eval() 函数,用 JSON 数据来生成原生的 JavaScript 对象。
下面是user.json文件
{
"id":1,
"name":"Backy",
"email":"[email protected]"
}
下面是HTML文件:
1.创建XMLHttpRequest对象
2.请求数据
(1)判断是否请求成功,如果请求成功,则将JSON数据转化为Javascript对象
(2)用es6的模板字符串将请求到的Javascript对象以ul的形式存储
(3)将ul插入到dom节点
3.向服务器发送请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc() {
// 创建XMLHttpRequest对象
let xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function(){
if(this.status === 200)
//使用parse方法将JSON数据转化为JS对象
var m = JSON.parse(this.responseText);
let output = '';
//es6中的模板字符串语法
output += (`
<ul>
<li> ${m.id} </li>
<li> ${m.name} </li>
<li> ${m.email} </li>
</ul>`);
document.getElementById("user").innerHTML = output;
};
xmlhttp.open("GET","user.json",true);
xmlhttp.send();
}
</script>
</head>
<body>
<input type="button" value="请求单个数据" onclick="loadXMLDoc()" >
<h1>单个用户</h1>
<div id="user"></div>
</body>
</html>