1. 服务器端处理（使用 PHP）：
首先，创建一个 PHP 文件（例如 getXmlData.php），该文件将生成一个简单的 XML 响应。
<?php
// 创建一个简单的 XML 响应
header('Content-Type: application/xml');
$xmlString = '<?xml version="1.0" encoding="UTF-8"?>
<data>
<person>
<name>John Doe</name>
<age>30</age>
</person>
<person>
<name>Jane Smith</name>
<age>25</age>
</person>
</data>';
echo $xmlString;
?>
2. 前端使用 AJAX：
创建一个 HTML 文件，通过 AJAX 请求 getXmlData.php 并解析返回的 XML 数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX XML Example</title>
</head>
<body>
<h1>XML Data</h1>
<ul id="personList"></ul>
<script>
// 使用 AJAX 请求 XML 数据
var xhr = new XMLHttpRequest();
xhr.open('GET', 'getXmlData.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 请求成功，解析返回的 XML 数据
var xmlString = xhr.responseText;
var xmlDoc = new DOMParser().parseFromString(xmlString, 'text/xml');
displayPersons(xmlDoc);
}
};
xhr.send();
// 显示 XML 中的人员信息
function displayPersons(xmlDoc) {
var personList = document.getElementById('personList');
var persons = xmlDoc.getElementsByTagName('person');
for (var i = 0; i < persons.length; i++) {
var person = persons[i];
var name = person.getElementsByTagName('name')[0].textContent;
var age = person.getElementsByTagName('age')[0].textContent;
var listItem = document.createElement('li');
listItem.textContent = 'Name: ' + name + ', Age: ' + age;
personList.appendChild(listItem);
}
}
</script>
</body>
</html>
在这个示例中，AJAX 请求将由前端的 JavaScript 发送到服务器端的 PHP 文件。PHP 文件生成一个包含人员信息的简单 XML 响应。前端 JavaScript 使用 DOMParser 解析 XML 字符串，并通过 DOM 操作获取和显示 XML 中的人员信息。
这只是一个简单的示例，实际中可能需要更多的安全性和错误处理。确保服务器返回的 XML 数据格式正确，以便在前端正确解析。
转载请注明出处：http://www.zyzy.cn/article/detail/13185/AJAX