AJAX数据格式

最新推荐文章于 2024-07-30 08:20:42 发布

ljs1196

最新推荐文章于 2024-07-30 08:20:42 发布

阅读量557

点赞数

本文链接：https://blog.csdn.net/li2534153206/article/details/80212911

版权

在服务器端AJAX 是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下 3 种格式返回数据：

Html 传输格式

由于返回的数据格式为 html 所以利用函数 innerHtml 插入标签内即可。

htmlTest.jsp 代码如下

 1 <%--
 2   Created by IntelliJ IDEA.
 3   User: yin‘zhao
 4   Date: 2017/12/04
 5   Time: 23:23
 6   To change this template use File | Settings | File Templates.
 7 --%>
 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 9 <html>
10 <head>
11     <title>HtmlPage</title>
12     <script type="text/javascript">
13         window.onload = function () {
14 //            获取 a 标签
15             var aTags = document.getElementsByTagName("a");
16 //            为每一个 a 标签添加点击事件
17             for (var i = 0; i < aTags.length; i++) {
18                 aTags[i].onclick = function () {
19 //                    新建 XMLHttpRequest 对象
20                     var request = new XMLHttpRequest();
21 //                    定义传输方法为 GET
22                     var method = "GET";
23 //                    定义 URL
24                     var url = this.href + "?time=" + new Date();
25 //                    发送请求
26                     request.open(method, url);
27 //                    不需要传输数据，设置传输内容为 null
28                     request.send(null);
29 //                    处理响应
30                     request.onreadystatechange = function () {
31 //                        如果响应已经完成
32                         if (request.readyState == 4) {
33 //                            如果服务器状态码正确
34                             if (request.status == 200 || request.status == 304) {
35 //                                那么就将响应字段加入预先定义好的 Html 中
36                                 document.getElementById("htmlTest").innerHTML = request.responseText;
37                             }
38                         }
39                     }
40 //                    超链接点击事件返回 false，取消其默认事件的触发
41                     return false;
42                 }
43             }
44         }
45     </script>
46 </head>
47 <body>
48 <ul>
49     <li><a href="yy.html">YY Page</a></li><br>
50     <li><a href="SSPage.html">SS Page</a></li><br>
51     <li><a href="YYSSPage.html">YS Page</a></li><br>
52 </ul>
53 <div id="htmlTest"></div>
54 </body>
55 </html>

各超链接所对应的页面（SSPage.jsp、yy.html、YYSSPage.html）

1 <h3>SS</h3>
2 <b>ssPage please go to</b>

1 <h3>YY</h3>
2 <b>yyPage please go to</b>

1 <h3>YS</h3>
2 <b>ysPage please go to</b>

XML 传输格式

传输格式为 XML 需要在 jsp 页面中解析为 XML 获取标签内容然后加入页面

 1 <%--
 2   Created by IntelliJ IDEA.
 3   User: yin‘zhao
 4   Date: 2017/12/05
 5   Time: 8:41
 6   To change this template use File | Settings | File Templates.
 7 --%>
 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 9 <html>
10 <head>
11     <title>XMLPage</title>
12     <script type="text/javascript">
13         window.onload = function () {
14             var aTag = document.getElementsByTagName("a");
15             for (var i = 0; i < aTag.length; i++) {
16                 aTag[i].onclick = function () {
17                     var url = this.href + "?time=" + new Date();
18                     var method = "GET";
19                     var request = new XMLHttpRequest();
20 
21                     request.open(method, url);
22                     request.send(null);
23                     request.onreadystatechange = function () {
24                         if (request.readyState == 4) {
25                             if (request.status == 200 || request.readyState == 304) {
26 //                                获得返回数据的 XML 格式
27                                 var result = request.responseXML;
28 //                                获得返回内容的 name 标签
29                                 var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
30 //                                获得返回内容的 website 标签
31                                 var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
32 //                                创建 h3 标签
33                                 var hNode = document.createElement("h3");
34 //                                将 website 内容加入到 h3 标签内
35                                 hNode.appendChild(document.createTextNode(name));
36 
37                                 var bNode = document.createElement("b");
38                                 bNode.appendChild(document.createTextNode(website));
39 
40                                 var divNode = document.getElementById("details");
41 //                                每次点击的时候首先将其内容清空，在加入对应的标签
42                                 divNode.innerHTML = "";
43                                 divNode.appendChild(hNode);
44                                 divNode.appendChild(bNode)
45                             }
46                         }
47                     }
48                     return false;
49                 }
50             }
51         }
52     </script>
53 </head>
54 <body>
55   <ul>
56       <li><a href="yy.xml">YYPage</a></li><br><br>
57       <li><a href="ss.xml">SSPage</a></li><br><br>
58       <li><a href="ys.xml">YSPage</a></li><br><br>
59   </ul>
60   <div id="details"></div>
61 </body>
62 </html>

各超链接所对应的 xml 文件（ss.xml、yy.xml、ys.xml）

1 <?xml version="1.0" encoding="UTF-8" ?>
2 <details>
3 <name>ss</name>
4 <website>ss.com</website>
5 </details>

1 <?xml version="1.0" encoding="UTF-8" ?>
2 <details>
3     <name>yy</name>
4     <website>yy.com</website>
5 </details>

1 <?xml version="1.0" encoding="UTF-8" ?>
2 <details>
3     <name>ys</name>
4     <website>ys.com</website>
5 </details>

JSON 传输格式

传输数据格式为 JSON 首先在页面需要将其转换为 JSON 格式

<%--
      Created by IntelliJ IDEA.
      User: yin‘zhao
      Date: 2017/12/04
      Time: 23:23
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JSONPage</title>
        <script type="text/javascript">
            window.onload = function () {
                var aTags = document.getElementsByTagName("a");

                for (var i = 0; i < aTags.length; i++) {
                    aTags[i].onclick = function () {
                        var request = new XMLHttpRequest();
                        var method = "GET";
                        var url = this.href + "?time=" + new Date();
                        request.open(method, url);
                        request.send(null);

                        request.onreadystatechange = function () {
                            if (request.readyState == 4) {
                                if (request.status == 200 || request.status == 304) {
                                    var result = request.responseText;
    //                                转换为 JSON 格式，将字符串
                                    var jsonCon = eval("(" + result + ")");
    //                                获取 name 和 website 节点值
                                    var name = jsonCon.person.name;
                                    var website = jsonCon.person.website;
    //                                创建新的 html 节点
                                    var hNode = document.createElement("h3");
                                    hNode.appendChild(document.createTextNode(name));
                                    var bNode = document.createElement("b");
    //                                给新建的节点添加子节点，并为新的子节点添加内容
                                    bNode.appendChild(document.createTextNode(website));

                                    var divNode = document.getElementById("jsonTest");
    //                                清空 div 节点中的内容
                                    divNode.innerHTML = "";
    //                                添加子节点
                                    divNode.appendChild(hNode);
                                    divNode.appendChild(bNode);
                                }
                            }
                        }
                        return false;
                    }
                }
            }
        </script>
    </head>
    <body>
    <ul>
        <li><a href="yy.json">YY Page</a></li><br>
        <li><a href="ss.json">SS Page</a></li><br>
        <li><a href="ys.json">YS Page</a></li><br>
    </ul>
    <div id="jsonTest"></div>
    </body>
    </html>

各超链接所对应的 json 文件

1 {
2   "person":{
3     "name":"ss",
4     "website":"ss.com"
5   }
6 }

1 {
2   "person":{
3     "name":"ys",
4     "website":"ys.com"
5   }
6 }

{
  "person": {
    "name": "yy",
    "website": "yy.com"
  }
}

各种传输格式的优缺点

优点

1. Html 传输格式不需要 js 解析 html 代码，可读性好，html 代码和 innerHtml 属性搭配效率高

2. XML 是一种通用的传输格式，不必把数据强加到已经定义好的格式中，而为数据自定义合适的标记，且利用 DOM 可以完全掌握文档

3. JSON 和 XML 相似但相比起来更加轻巧

缺点

1. 若需要使用 Ajax 更新一篇文档的多个部分则 html 不合适

2. 当浏览器接收到较长的 XML 文档时 DOM 解析可能会很复杂

3. JSON 的语法严谨，代码不宜读

适用场景

1. 若 application 不需要与其他程序共享数据时使用 HTML

2. 如果数据需要重用 JSON 在性能和大小方面有优势

3. 当远程程序未知时 XML 文档是首选

ljs1196

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
19
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫