Ajax-XML

在上一篇文章当中博主遗留了一个问题，关于问题的内容是什么这里就不在重复说明了，问题所在就是如果后端返回的内容当中包含 | 的话那么就会造成前端取值展示的不正确，这里就要介绍到一个新的知识点 XML 了，百度百科简介如下：

image-20220306213247994

如果你学习过 HMTL，在学习 XML 就和切菜一样没啥区别了，这里就直接上代码了，废话不多说，首先新建一个 info.xml 文件内容如下：

<?xml version="1.0" encoding="UTF-8" ?>
<person>
    <name>BNTang</name>
    <age>33</age>
</person>

然后紧接着就是编写 php 服务端的代码，在编写服务端代码的时候有一个注意点需要注意，执行结果中有中文, 必须在 PHP 文件顶部设置如下代码：

header("content-type:text/html; charset=utf-8");

如果 PHP 中需要返回 XML 数据, 也必须在 PHP 文件顶部设置如下代码：

header("content-type:text/xml;charset=utf-8");

最终服务端代码如下：

ajax-xml.php:

<?php
header("content-type:text/xml;charset=utf-8");
echo file_get_contents("../info.xml");

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script src="../myAjax.js"></script>
    <script>
        window.onload = () => {
            let oBtn = document.querySelector("button");
            oBtn.onclick = () => {
                ajax({
                    type: "get",
                    url: "ajax-xml.php",
                    success: (xhr) => {
                        let res = xhr.responseXML;
                        console.log(res.querySelector("name").innerHTML);
                        console.log(res.querySelector("age").innerHTML);
                    },
                    error: (xhr) => {
                        console.log(xhr.status);
                    }
                });
            }
        }
    </script>
</head>
<body>
<button>发送请求</button>
</body>
</html>
posted @ 2022-03-06 22:49  BNTang  阅读(28)  评论(0)    收藏  举报