AJAX

最新推荐文章于 2025-03-16 10:00:00 发布

原创最新推荐文章于 2025-03-16 10:00:00 发布 · 152 阅读

CC 4.0 BY-SA版权

本文介绍了使用JavaScript的AJAX技术进行异步数据请求的方法，包括如何创建XMLHttpRequest对象，发送GET请求到服务器获取JSON数据，并解析JSON字符串为对象进行DOM操作。通过实例展示了数据类型转换、JSON.stringify和JSON.parse的用法。

代码如下：

js_ajax.html代码：

js_ajax2.html代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript">
                   //js里的XMLHttpRequest类似python里的requestes、urlib
           function getXML(){
               if(window.XMLHttpRequest){
                   return new window.XMLHttpRequest()
               }else{
                   //解决微软的特殊情况
                   new window.ActiveXObject('Microsoft.XMLHTTP')
               }
           }
           i = 0
           //异步请求服务器数据函数
           function jsonData(){
               var xhr = getXML()
               xhr.open('GET','data.json')
               xhr.send(null)

               i++
               //监听
               xhr.onreadystatechange = function(){
                   if(xhr.readyState == 4 && xhr.status == 200){
                       //得到服务器返回的json字符串
                       resp = xhr.responseText

                       htmlText = ""
                       //解析字符串为json对象
                       jsonObj = JSON.parse(resp)

                       console.log(jsonObj)

                       //组织显示html格式
                       htmlText = '<tr><td>' + jsonObj.user + i + '</td></tr>'
                       document.getElementById('userData').innerHTML = htmlText
                   }
               }

           }
       </script>
   </head>
   <body>
       <input type="button" value="加载" onclick="jsonData()"/>
       <table border="1">

           <thead>
               <tr><th>用户名</th></tr>
           </thead>
           <tbody id='userData'></tbody>
       </table>
   </body>
</html>

date.json代码：

{"user":"zhangsan","age":19,"date":"2019-09-23T02:54:52.983Z","money":[1,2,3,4,5]}