<Ajax> 五. xml数据解析

前端代码

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Title</title>
</head>
<body>
    <input type="submit" value="发送请求" >
    <h3></h3>
</body>
</html>

<script src="./jquery-3.2.1.js"></script>
<script>
$(function () {
    $("#name").click(function() {
        // 创建请求对象
        var xhr = new XMLHttpRequest();

        // 请求行
        xhr.open("get", "postData.php");

        // 请求头

        // 回调函数
        xhr.onload = function() {
            console.log(xhr.responseText);
            console.log(xhr.responseXML);

            // 得到xml数据 
            var xml = xhr.responseXML;

            // 解析xml数据
            var name = xml.querySelector("name").innerHTML;
            var age = xml.querySelector("age").innerHTML;

            // 显示xml数据
            $("h3").text(name + "--" + age);
        };

        // 请求主体
        xhr.send(null);
    });
});
</script>

后端PHP代码

<?php
    // 设置格式
    header('content-type:text/xml;charset=utf-8');

    // 返回数据
    echo file_get_contents('data.xml');
?>

后端xml代码

<?xml version="1.0" encoding="UTF-8"?>
<root>
<name>RayLee</name>
<age>18</age>
</root>

五. xml数据解析

相关推荐