AJAX请求JSON数据 川长思鸟来 2022-05-16 08:56 207阅读 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文件: 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> 注意:要将html文件和json文件放到同一文件夹下(避免跨域问题)。
还没有评论,来说两句吧...