AJAX（Asynchronous JavaScript and XML）是一種常用的web技術，能夠實現無需刷新頁面的異步數據交互。在開發過程中，我們經常需要通過AJAX請求后臺返回的XML數據，并對其進行解析和處理。本文將介紹如何使用JavaScript和jQuery來解析返回的XML數據，并以實例進行說明。

在JavaScript中，我們可以使用XMLHttpRequest對象來發送AJAX請求獲取XML數據，jQuery庫也提供了方便的ajax()方法。根據返回的XML數據格式不同，我們可以使用DOM操作或者XPath來解析XML。

首先，我們來看一個簡單的例子，假設我們發送了一個AJAX請求，后臺返回的XML數據如下：

<students>
<student>
<name>Alice</name>
<age>20</age>
<gender>female</gender>
</student>
<student>
<name>Bob</name>
<age>22</age>
<gender>male</gender>
</student>
</students>

使用JavaScript的DOM操作來解析上述XML數據，首先我們需要獲取XML對象，然后使用getElementByTagName()等方法來遍歷XML節點：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var xmlDoc = this.responseXML;
var students = xmlDoc.getElementsByTagName("student");
for (var i = 0; i < students.length; i++) {
var name = students[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
var age = students[i].getElementsByTagName("age")[0].childNodes[0].nodeValue;
var gender = students[i].getElementsByTagName("gender")[0].childNodes[0].nodeValue;
console.log("Name: " + name + ", Age: " + age + ", Gender: " + gender);
}
}
};
xmlhttp.open("GET", "example.xml", true);
xmlhttp.send();

上述代碼中，首先通過XMLHttpRequest對象發送GET請求，然后在readyState為4（請求已完成）并且status為200（成功）的情況下，獲取XML對象，并使用getElementsByTagName()方法獲取student節點的集合。通過節點的getElementsByTagName()方法再次遍歷獲取name、age和gender節點，并使用childNodes[0].nodeValue獲取節點的值。

除了使用DOM操作解析XML，我們還可以使用XPath來處理。繼續以上面的XML數據為例，下面是使用XPath解析XML的代碼：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var xmlDoc = this.responseXML;
var students = xmlDoc.evaluate("http://student", xmlDoc, null, XPathResult.ANY_TYPE, null);
var student = students.iterateNext();
while (student) {
var name = xmlDoc.evaluate("name", student, null, XPathResult.STRING_TYPE, null).stringValue;
var age = xmlDoc.evaluate("age", student, null, XPathResult.STRING_TYPE, null).stringValue;
var gender = xmlDoc.evaluate("gender", student, null, XPathResult.STRING_TYPE, null).stringValue;
console.log("Name: " + name + ", Age: " + age + ", Gender: " + gender);
student = students.iterateNext();
}
}
};
xmlhttp.open("GET", "example.xml", true);
xmlhttp.send();

上述代碼中，使用XMLHttpRequest對象發送GET請求后，通過XMLDocument的evaluate()方法來執行XPath查詢。使用"http://student"作為查詢表達式，可以獲取所有的student節點集合。然后使用iterateNext()方法遍歷student節點，并使用evaluate()方法通過相對路徑查詢子節點的值。

通過以上示例，我們可以看到使用JavaScript和jQuery解析返回的XML數據是相對簡單的。無論使用DOM操作還是XPath，我們都可以輕松地遍歷XML節點并獲取節點的值，從而實現對返回的XML數據的解析和處理。