PHP Ajax和XML简单交互操作

23 阅读 0 评论 0 点赞

本节将介绍一个简单的PHP、Ajax和XML三者交互的例子，实现一个XML数据查询和显示系统。

思路：1. 在test.html里准备一个查询按钮（触发回调函数loadXML）和一个显示标签（div.result），通过loadXML()函数向test.php服务器发送请求。2. loadXML()函数主要内容是：创建XMLHttpRequest对象，配置为GET请求，通过send()方法发送请求，在请求成功时解析XML数据并填充div.result的标签内容。3. test.php处理请求，读取dotcpp.xml文件，返回XML数据。

1. 先准备一个dotcpp.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<dotcpp>
    <brand>Dotcpp编程</brand>
    <website>dotcpp.com</website>
    <course>PHP教程</course>
    <courses>
        <course id="1">PHP基础</course>
        <course id="2">PHP高级</course>
        <course id="3">PHP框架</course>
    </courses>
</dotcpp>

2. test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PHP Ajax XML 交互示例</title>
</head>
<body>
    <h2>Dotcpp XML数据查询系统</h2>
     
    <button onclick="loadXML()">加载XML数据</button>
     
    <div id="result" style="width: 700px; display:flex;">
        
    </div>
    
    <script>
    function loadXML() {
        // 1. 创建XMLHttpRequest对象
        let xhr = new XMLHttpRequest();
         
        // 2. 配置请求
        xhr.open("GET", "test.php", true);
         
        // 3. 定义响应处理函数
        xhr.onreadystatechange = function() {
            /*readystate==4&&status==200表示一个http请求已经成功完成！*/
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 解析XML数据
                parseXML(xhr.responseXML);
            }
        };
         
        // 4. 发送请求
        xhr.send();
    }
    
    function parseXML(xml) {
        if (!xml) {
            document.getElementById("result").innerHTML = "无法解析XML数据";
            return;
        }
        
        // 获取XML根元素
        let dotcpp = xml.getElementsByTagName("dotcpp")[0];
        
        // 提取数据
        let brand = dotcpp.getElementsByTagName("brand")[0].childNodes[0].nodeValue;
        let website = dotcpp.getElementsByTagName("website")[0].childNodes[0].nodeValue;
        let course = dotcpp.getElementsByTagName("course")[0].childNodes[0].nodeValue;
        
        // 获取课程列表
        let courses = dotcpp.getElementsByTagName("courses")[0];
        let courseList = courses.getElementsByTagName("course");
        
        // 构建显示内容
        let html = "";
        html += "<table border='1' cellpadding='5' cellspacing='0'>";
        html += "<tr><th>字段</th><th>值</th></tr>";
        html += "<tr><td>品牌</td><td>" + brand + "</td></tr>";
        html += "<tr><td>网站</td><td>" + website + "</td></tr>";
        html += "<tr><td>主课程</td><td>" + course + "</td></tr>";
        html += "</table>";
        
        html += "<ul>";
        for (let i = 0; i < courseList.length; i++) {
            let courseId = courseList[i].getAttribute("id");
            let courseName = courseList[i].childNodes[0].nodeValue;
            html += "<li>ID: " + courseId + " - " + courseName + "</li>";
        }
        html += "</ul>";
        
        // 更新页面显示结果
        document.getElementById("result").innerHTML = html;
    }
    </script>
</body>
</html>

3. test.php

<?php
// 设置响应头，指定返回的是XML格式
header('Content-Type: text/xml; charset=utf-8');
// XML文件路径
$xmlFile =__DIR__. '/dotcpp.xml';
    // 读取dotcpp.xml
    readfile($xmlFile);
?>

4. 效果演示：

4.1 进入test.html页面：

PHP Ajax和XML