AJAX请求JSON数据

川长思鸟来 2022-05-16 08:56 296阅读 0赞

**什么是AJAX?**

AJAX = 异步 JavaScript 和 XML。

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

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

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

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

**JSON相关介绍：**

JSON: **J**ava**S**cript **O**bject **N**otation(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>

注意：要将html文件和json文件放到同一文件夹下（避免跨域问题）。