Ajax获取XML格式的数据

最新推荐文章于 2022-11-13 17:10:27 发布

刘小筛

最新推荐文章于 2022-11-13 17:10:27 发布

阅读量1k

点赞数

分类专栏： Javascript 前端 Ajax 文章标签： ajax xml 服务器

本文链接：https://blog.csdn.net/LHJBK/article/details/53134134

版权

Javascript 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

前端

17 篇文章 0 订阅

订阅专栏

Ajax

7 篇文章 0 订阅

订阅专栏

XML格式数据的解析

优点：

XML是一种通用的数据格式。
不必把数据强加到已定义好的格式中，二是要为数据自定义合适的标记
利用DOM可以完全掌控文档。

缺点：

如果文档来自于服务器，就必须得保证文档含有正确的首部信息。若文档类型不正确，那么response XML的值是空的。
当浏览器接受到长的XML文件后， DOM解析可能会很复杂。

解析XML代码如下：

1、xml文件（文件名为：test.xml）：

<?xml version="1.0" encoding="utf-8" ?>
<details>
    <name>JBK</name>
    <website>http://baidu.com/</website>
    <email>15204510180@163.com</email>
</details>

2、js解析文件：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function () {
            var  as= document.getElementsByTagName("a");

            for(var i=0;i< as.length;i++){
                as[i].onclick= function () {

                    var request = new XMLHttpRequest();
                    var url = this.href;
                    var method="GET";
                    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、结果不能直接使用,必须先创建对应但节点,再把节点加入到#detail中
//                                目标格式为:
//                                      <h2><a href="mailto:15204510180@163.com">JBK</a></h2>
//                                      <a href="http://baidu.com/">http://baidu.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="maelto:"+email;

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

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

                                var dNode=document.getElementById("details");
                                dNode.innerHTML="";
                                dNode.appendChild(aNode);
                                dNode.appendChild(aNode1)


                            }

                        }
                    }
                    return false;

                }
            }



        }
    </script>
</head>
<body>
<a href="test.xml">1</a>
<a href="test.xml">2</a>
<a href="test.xml">3</a>
<a href="test.xml">4</a>
<div id="details"></div>

</body>
</html>