Ajax：获取服务端XML数据（responseXML、content-type）

最新推荐文章于 2024-03-06 16:52:15 发布

昔冰_G

最新推荐文章于 2024-03-06 16:52:15 发布

阅读量1.2k

点赞数

分类专栏： Ajax 文章标签： ajax xml javascript

本文链接：https://blog.csdn.net/qq_38800316/article/details/120579737

版权

Ajax 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

XML：用于存储和传输数据，关注的是数据的内容

HTML：用于展示数据，关注的是数据的外观

平时使用response来获取服务端的响应数据；对于XML数据需要使用responseXML来获取。

客户端获取到的responseXML有着和document类似的获取标签元素对象的方法

从而可以从存在标签的响应数据中获取到被包裹在内的值

<body>
    <!-- XML：用于存储和传输数据，关注数据的内容 HTML：用于展示数据，关注数据的外观 -->
    <button id="btn">发送请求</button>
    <div id="container"></div>
    <script>
        var btn = document.getElementById('btn');
        var container = document.getElementById('container');
        btn.onclick = function() {
            var xhr = new XMLHttpRequest();
            xhr.open('get', '/xml');
            xhr.send();
            xhr.onload = function() {
                // xhr.responseXML来获取服务器端返回的XML数据
                var xmlDocument = xhr.responseXML;

                // xmlDocument获取到的XML存在同html中类似的方法
                var content = xmlDocument.getElementsByTagName('content')[0].innerHTML;
                container.innerHTML = content;
            }
        }
    </script>
</body>

服务端需要配置响应头的内容类型为xml类型，然后将xml内容响应给客户端

app.get('/xml', (req, res) => {
    // 设置响应头告诉客户端返回的是xml数据
    res.header('content-type', 'text/xml');

    res.send('<message><title>善</title><content>积善者必有余庆</content></message>');
})

测试结果：（点击按钮后发送请求，响应请求，获取响应数据，插入到页面中显示数据内容）