AJAX请求JSON数据-蒲公英云

AJAX请求JSON数据

什么是AJAX?

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

JSON相关介绍：

JSON: JavaScript Object Notation(JavaScript 对象表示法)

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析。

JSON 是轻量级的文本数据交换格式。

JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。

由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。

下面是user.json文件

{
  "id":1,
  "name":"Backy",
  "email":"2687773647@qq.com"
}

下面是HTML文件：

１.创建XMLHttpRequest对象

2.请求数据

（１）判断是否请求成功，如果请求成功，则将JSON数据转化为Javascript对象

（２）用es6的模板字符串将请求到的Javascript对象以ul的形式存储

（３）将ul插入到dom节点

３.向服务器发送请求

<!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>