前端代码
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Title</title>
</head>
<body>
<input type="submit" value="发送请求" id="name">
<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>