Ajax数据格式

最新推荐文章于 2023-04-02 21:31:51 发布

freely小潘

最新推荐文章于 2023-04-02 21:31:51 发布

阅读量897

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/FreelyLang/article/details/55532235

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下3种格式返回数据：（1）XML （2）JSON （3）HTML
1.HTML由一些普通的文本组成。如果服务器通过XMLHttpRequest发送HTML,文本将存储在responseText属性中。
2.不必从responseText中读取数据。它已经是希望的格式，可以直接将它插入到页面中。
3.插入HTML代码最简单的方法是更新这个元素的innerHTML属性。
HTML格式：
在html文件中新建一个index.html和files文件，files文件中有三个html,目录结构如下：
ajax目录结构图

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>People at Clear</title>
<script type="text/javascript">
    window.onload = function(){
        var aNodes = document.getElementsByTagName("a");
        for(var i = 0;i<aNodes.length;i++){
            aNodes[i].onclick = function(){

                var request = new XMLHttpRequest();
                var method = "GET";
                var url = this.href;

                request.open(method,url);
                request.send(null);

                request.onreadystatechange = function(){
                    if(request.readyState ==4){
                        if(request.status ==200 || request.status ==304){
                            document.getElementById("details").innerHTML = request.responseText;
                        }
                    }
                }

                return false;
            }
        }
    }
</script>

</head>
<body>
    <h1>People</h1>
    <ul>
        <li>
            <a href="files/andy.html">Andy</a>
        </li>
        <li>
            <a href="files/richard.html">Richard</a>
        </li>
        <li>
            <a href="files/jeremy.html">Jeremy</a>
        </li>
    </ul>
    <div id="details"></div>
</body>
</html>

andy.html

<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
<a href="http://andybudd.com">http://andybudd.com"</a>

richard.html

<h2><a href="mailto:richard@clearleft.com">richard</a></h2>
<a href="http://richard.com">http://richard.com"</a>

jeremy

<h2><a href="mailto:jeremy@clearleft.com">jeremy</a></h2>
<a href="http://jeremy.com">http://jeremy.com"</a>

优点：
（1）从服务器发送的HTML代码在浏览器端不需要用JavaScript进行解析。
（2）HTML的可读性好
（3）HTML代码块与innerHTML属性搭配，效率高
缺点：
若需要通过AJAX更新一篇文档的多个部分,HTML不合适

XML格式：
在xml文件中新建一个files文件，其中有2个xml文件，andy.xml,jeremy.xml和richard.xml

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>People at Clear</title>
<script type="text/javascript">
    window.onload = function(){
        var aNodes = document.getElementsByTagName("a");
        for(var i = 0;i<aNodes.length;i++){
            aNodes[i].onclick = function(){

                var request = new XMLHttpRequest();
                var method = "GET";
                var url = this.href;

                request.open(method,url);
                request.send(null);

                request.onreadystatechange = function(){
                    if(request.readyState ==4){
                        if(request.status ==200 || request.status ==304){
                            //1.结果为XML格式，所以需要使用responseXML,来获取
                            var result = request.responseXML;

                            //2.结果不能直接使用，必须先创建对应的节点，再把节点加入到#details中
                            //目标格式为:
                            /*
                            <h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
                            <a href="http://andybudd.com">http://andybudd.com"</a>
                            */

                            var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
                            var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
                            var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;

                            //alert(name);
                            //alert(website);
                            //alert(email);

                            var aNode = document.createElement("a");
                            aNode.appendChild(document.createTextNode(name));
                            aNode.href = "mailto"+email;

                            var h2Node = document.createElement("h2");
                            h2Node.appendChild(aNode);

                            var aNode2 = document.createElement("a");
                            aNode2.appendChild(document.createTextNode(website));
                            aNode2.href = website;


                            var detailsNode = document.getElementById("details");
                            detailsNode.innerHTML = "";
                            detailsNode.appendChild(h2Node);
                            detailsNode.appendChild(aNode2);


                        }
                    }
                }

                return false;
            }
        }
    }
</script>

</head>
<body>
    <h1>People</h1>
    <ul>
        <li>
            <a href="files/andy.xml">Andy</a>
        </li>
        <li>
            <a href="files/richard.xml">Richard</a>
        </li>
        <li>
            <a href="files/jeremy.xml">Jeremy</a>
        </li>
    </ul>
    <div id="details"></div>
</body>
</html>

andy.xml

<?xml version="1.0" encoding="UTF-8"?>
<details>
    <name>Andy fgsjr</name>
    <website>http://gritr.com</website>
    <email>andy@sina.com</email>
</details>

jeremy.xml

<?xml version="1.0" encoding="UTF-8"?>
<details>
    <name>Jeremy gfago</name>
    <website>http://dfhaifj.com</website>
    <email>jeremy@sina.com</email>
</details>

richard.xml

<?xml version="1.0" encoding="UTF-8"?>
<details>
    <name>Richard sgserg</name>
    <website>http://eretd.com</website>
    <email>Richard@sina.com</email>
</details>

XML优点：
（1）XML 是一种通用的数据格式
（2）不必把数据强加到已定义好的格式中，而是要为数据定义合适的标记
（3）利用DOM可以完全掌控文档
缺点：
如果文档来自于服务器，就必须保证文档含有正确的首部信息。若文档类型不正确，那么responseXML的值是空的。

freely小潘

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Ajax数据格式

从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下3种格式返回数据：（1）XML （2）JSON （3）HTML 1.HTML由一些普通的文本组成。如果服务器通过XMLHttpRequest发送HTML,文本将存储在responseText属性中。 2.不必从responseText中读取数据。它已经是希望的格式，可以直接将它插入到页面中。 3.插
复制链接

扫一扫