Ajax--解析JSON数据与解析XML数据

一.Ajax解析JSON数据

nav.json(json数据)

 1 [
 2   {
 3     "link":"http://www.jd.com",
 4     "src":"images/nav_1.png",
 5     "text":"京东超市"
 6   },
 7   {
 8     "link":"http://www.taobao.com",
 9     "src":"images/nav_2.png",
10     "text":"全球购"
11   },
12   {
13     "link":"http://www.mi.com",
14     "src":"images/nav_3.png",
15     "text":"服装城"
16   },
17   {
18     "link":"http://www.163.com",
19     "src":"images/nav_4.png",
20     "text":"京东生鲜"
21   }
22 
23 ]

nav_json.php (服务器)

 1 <?php
 2 /**
 3  * Created by qinpeizhou.
 4  * Date: 2017/11/10
 5  * Time: 16:52
 6  * Email : 1031219129@qq.com
 7  */
 8 header('Content-Type:text/html;charset=utf-8;');
 9 $jsonStr = file_get_contents('nav.json');
10 echo $jsonStr;

原生JavaScript进行Ajax的JSON解析：

nav_json_HTML_JSON.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7       *{
 8           margin: 0;
 9           padding: 0;
10           list-style: none;
11       }
12         .nav{
13             border: 1px solid #ddd;
14         }
15         .nav li {
16             float: left;
17             width: 200px;
18             text-align: center;
19         }
20         .nav li a{
21             text-decoration: none;
22         }
23     </style>
24 </head>
25 <body>
26    <button id="btn">无刷新请求</button>
27 <div class="nav">
28     <ul id="navIn">
29         <!--<li>
30             <a href="chaoshi.html">
31                 <img src="images/nav_1.png" alt="">
32                 <p>京东超市</p>
33             </a>
34         </li>
35         <li>
36             <a href="chaoshi.html">
37                 <img src="images/nav_2.png" alt="">
38                 <p>京东超市</p>
39             </a>
40         </li>
41         <li>
42             <a href="chaoshi.html">
43                 <img src="images/nav_3.png" alt="">
44                 <p>京东超市</p>
45             </a>
46         </li>
47         <li>
48             <a href="chaoshi.html">
49                 <img src="images/nav_4.png" alt="">
50                 <p>京东超市</p>
51             </a>
52         </li>-->
53     </ul>
54 </div>
55 </body>
56 </html>
57 <script>
58     /**
59      // 1.创建AJAX对象
60      // 2.链接服务器
61      // 3.发送请求
62      // 4.接受响应结果
63      * */
64 
65      // 需求：点击按钮，获取数据并无刷新的添加到页面里
66     var btn = document.getElementById('btn');
67     var navIn = document.getElementById('navIn');
68     btn.onclick = function () {
69         // 1.创建小黄人
70         var xhr = new XMLHttpRequest();
71         // 2.小黄人去哪里
72         xhr.open('get','05nav_json.php',true);
73         // 3.小黄人出发了
74         xhr.send();
75         // 4.小黄人返回结果处理
76         xhr.onreadystatechange = function () {
77            if(xhr.status==200 && xhr.readyState == 4){
78                // 获取页面的响应文本
79                 var res = xhr.responseText;
80                 // 只能解析合法的JSON数据
81                 res = JSON.parse(res);
82                console.log(res);
83                // 把数据拼接成节点并添加到页面
84                 var htmlStr = '';
85                 for (var i = 0; i < res.length; i++) {
86                      htmlStr += " <li>" +
87                          "<a href="+res[i].link+">" +
88                              "<img src="+res[i].src+" alt=''> " +
89                              "<p>"+res[i].text+"</p>" +
90                          "</a><" +
91                          "/li>"
92                 }
93                navIn.innerHTML = htmlStr;
94            }
95         }
96     }
97 </script>

原生JavaScript进行Ajax的XML解析：

nav.xml

 1 <?xml version="1.0" encoding="UTF-8" ?>
 2 <array>
 3     <item>
 4         <link>http://www.jd.com</link>
 5         <src>images/nav_1.png</src>
 6         <text>京东超市</text>
 7     </item>
 8     <item>
 9         <link>http://www.taobao.com</link>
10         <src>images/nav_2.png</src>
11         <text>全球购</text>
12     </item>
13     <item>
14         <link>http://www.mi.com</link>
15         <src>images/nav_3.png</src>
16         <text>服装城</text>
17     </item>
18     <item>
19         <link>http://www.163.com</link>
20         <src>images/nav_4.png</src>
21         <text>京东生鲜</text>
22     </item>
23 </array>

nav_XML.php

1 <?php
2     header('Content-Type:application/xml;charset=utf-8;');
3 
4     $xmlStr = file_get_contents('nav.xml');
5     echo $xmlStr;
6 ?>

nav_XML.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10             list-style: none;
11         }
12         .nav {
13             border: 1px solid #ddd;
14             overflow: hidden;
15         }
16         .nav li{
17             float: left;
18             width: 100px;
19             text-align: center;
20         }
21         .nav li a{
22             text-decoration: none;
23         }
24     </style>
25 </head>
26 <body>
27     <button id="btn">无刷新请求</button>
28     <div class="nav">
29         <ul id="navIn">
30 
31         </ul>
32     </div>
33 </body>
34 </html>
35 <script>
36     /**
37      *      1. 创建AJAX对象
38      *      2. 连接服务器
39      *      3. 发送请求
40      *      4. 接收响应结果
41      */
42     // 需求：点击按钮，获取数据并无刷新的添加到页面里
43 
44     var btn = document.getElementById('btn');
45     var navIn = document.getElementById('navIn');
46     
47     btn.onclick = function () {
48 
49         // 1.创建小黄人
50         var xhr = new XMLHttpRequest();
51         // 2.小黄人去哪里
52         xhr.open('get','nav_XML.php',true);
53         // 3.小黄人出发了
54         xhr.send();
55         // 4.小黄人返回结果处理
56         xhr.onreadystatechange = function () {
57             if( xhr.status == 200 && xhr.readyState == 4 ){
58                 /* 获取页面的响应文本 */
59                 var res = xhr.responseXML;
60 //                res = JSON.parse(res);
61                 console.log(res.children[0].children);
62                 var item = res.children[0].children;
63                 /* 把数据拼接成节点，并添加到页面 */
64                 var htmlStr = '';
65                 for (var i = 0; i < item.length; i++) {
66                     htmlStr += '<li>\n' +
67                     '    <a href="'+item[i].querySelector('link').innerHTML+'">\n' +
68                     '        <img src="'+item[i].querySelector('src').innerHTML+'" alt="">\n' +
69                     '        <p>'+item[i].querySelector('text').innerHTML+'</p>\n' +
70                     '    </a>\n' +
71                     '</li>';
72                 }
73 //                console.log(htmlStr);
74                 navIn.innerHTML = htmlStr;
75             }
76         }
77 
78     }
79 
80 
81 
82 
83 </script>

posted @ 2017-11-10 21:22 QinXiao.Shou 阅读(660) 评论(0) 编辑收藏举报

刷新页面返回顶部