Ajax处理XML、HTML、JSON三种数据格式的方法

最新推荐文章于 2024-04-15 09:00:00 发布

最近隐姓埋名中

最新推荐文章于 2024-04-15 09:00:00 发布

阅读量3.7k

点赞数 1

文章标签： ajax 前端 json 服务器数据

本文链接：https://blog.csdn.net/qq_22655689/article/details/51861319

版权

服务器的编程语言只能返回三种格式的数据：XML、HTML、JSON。Ajax要在前端浏览器处理这三种格式。

1、HTML

HTML是三种格式中最好处理的一种，HTML由普通文本组成，文本将存储在responseText中，它已经是所希望的文本，不用解析，直接用innerHTML属性使用就可以。

eg:如果要把data.htmlL里的内容显示在另一个index.html中。

data.html的内容为HTML格式的数据：

<h2><a href="#">Andy Bully</a></h2>
<a href="#">www.Andy_Bully.com</a>

在index.html中进行Ajax交互，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload=function(){
            document.getElementsByTagName("a")[0].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("detail").innerHTML= request.responseText;
                        }
                    }
                }
                return false;  //return false是为了阻止a标签默认的行为
            }
        }
    </script>
</head>
<body>
    <a href="data.html">View Data</a>
    <div id="detail"></div>    //创建一个空的div存放等下点击要显示的数据信息内容
</body>
</html>

由上面代码可以看到，因为HTML的内容已经保存在responseText中，本身就是HTML格式，所以直接在要显示内容的节点上修改属性innerHTML则可以显示内容，运行的结果如下图：（单击View Data后数据显示出来）

HTML数据格式的优点：1、无需解析；2、可读性高；3、和innerHTML搭配使用效率高。缺点：1、如果要使用AJAX更新一篇文章的多个内容，这HTML数据格式不合适；2、innerHTML非DOM标准。

2、XML

和上面的例子一样，只不过这里改成了传递的是data.xml的格式是XML的数据。

data.xml的内容为

<?xml version="1.0" encoding="UTF-8"?>
<detail>
    <name>Andy Bully</name>
    <website>www.Andy_Bully.com</website>
</detail>

处理xml格式的数据分三步，首先解析xml文档，然后构建节点，最后把节点放入要显示的HTML页面中。

示例代码如下：（其他部分和上面截图的AJAX交互的代码一样，只是数据传输部分

document.getElementById("detail").innerHTML= request.responseText;

不一样）

//1、结果为XML格式，需要用responseXML来获取
 var result=request.responseXML;
 //2、不能直接使用，要先创建对应的节点，再把节点放入#detail中
 var name=result.getElementsByTagName("name")[0].firstChild.nodeValue;
 var website=result.getElementsByTagName("website")[0].firstChild.nodeValue;
 //构建相应的节点
 var aNode=document.createElement("a");
 aNode.appendChild(document.createTextNode(name));
 aNode.href="#";
 var h2Node=document.createElement("h2");
 h2Node.appendChild(aNode);
var aNode1=document.createElement("a");
 aNode1.appendChild(document.createTextNode(website));
 aNode1.href=website;
 var detailId=document.getElementById("detail");
 detailId.innerHTML="";//因为信息会反复出现，所以要把前面的消去才能每次点击只出现一次；

 detailId.appendChild(h2Node);
 detailId.appendChild(aNode1);

得到的结果和上面的例子得到的结果是一样的。

XML的优点：1、通用的数据格式；2、不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记；3、利用DOM可以完全掌控文档。缺点：1、如果文档来自于服务器，就必须得保证文档含有正确的首部信息。若文档类型不正确，那么responseXML的值将是空的；2、当浏览器接收到长的XML文件后，DOM解析可能会很复杂。

3、JSON

JSON是原生的JS格式，无需再解析

json数据为：

{"person":{
"name":"andy bully",
"website":"www.andy_bully.com",
}
}

JSON和XML一样，也是要获取信息后构建相应的节点再把数据放入相应的节点传到页面上。

/*

eval()方法可以把字符串解析为对象执行，比如：

eval("alert("hello"));会执行alert语句。

如果是解析JSON对象的话要加括号

例如 :Object="{"name":"andy"}";

      var result=eval("("+Object+")");

*/

var result=request.responseText;  //json保存在responseText里

var Object=eval("("+result+")");   //解析JSON 
var name=Object.person.name;
var website=Object.person.website;

剩下的创建节点的操作和XML里一样。

ISON优点：1、与XML很相似，但是更加灵巧；2、不需要从服务器端发送含有特定内容类型的首部信息。缺点：1、语法过于严谨；2、代码不易读；3、eval函数存在风险。

JSON和XML的对比：xml可读性很高，但是格式繁琐费流量；json格式简单，可读性不强但是省流量

三种数据传输格式的对比：

1、如果应用程序不需要与其他应用程序共享数据的时候，使用HTML片段来返回数据时最简单；

2、如果数据要重用，优先使用JSON；

3、当远程应用程序未知时，XML是首先，因为XML是web服务领域的“世界语”