Ajax是一種用于異步通信的技術，它允許網頁在不刷新的情況下與服務器交換數據。當我們使用Ajax從服務器請求數據時，返回的數據可能是不同的格式，例如XML格式。在本文中，我們將了解如何查看和格式化返回的XML數據。 要查看返回的XML數據，我們可以使用瀏覽器的開發者工具。不同的瀏覽器有不同的開發者工具，通常可以通過右鍵點擊網頁并選擇“檢查元素”或“開發者工具”來打開。在開發者工具中，我們可以找到“網絡”選項卡，它允許我們查看所有與服務器之間的網絡通信。 假設我們正在開發一個在線商城的網頁，我們想通過Ajax請求獲取商品的庫存信息。我們首先創建一個XMLHttpRequest對象，并使用它發送一個GET請求到服務器。服務器返回的數據是一個包含商品庫存信息的XML文件。 ```javascript var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var xmlData = this.responseXML; console.log(xmlData); } }; xhttp.open("GET", "http://example.com/inventory", true); xhttp.send(); ``` 上面的代碼發送了一個GET請求到`http://example.com/inventory`，并在控制臺中打印返回的XML數據。我們可以看到`xmlData`是一個XMLDocument對象，表示返回的XML數據。 要格式化返回的XML數據，我們可以使用`XMLSerializer`對象將XMLDocument對象轉換為字符串，然后使用縮進和換行符使其更易讀。例如： ```javascript var serializer = new XMLSerializer(); var xmlString = serializer.serializeToString(xmlData); console.log(formatXml(xmlString)); ``` 上述代碼中的`formatXml`函數是一個自定義函數，它將XML字符串進行格式化。以下是一個簡化版的`formatXml`函數的實現： ```javascript function formatXml(xml) { var formattedXml = ''; var reg = /(>)(<)(\/*)/g; xml = xml.replace(reg, '$1\r\n$2$3'); var pad = 0; xml.split('\r\n').forEach(function(node) { var indent = 0; if (node.match(/.+<\/\w[^>]*>$/)) { indent = 0; } else if (node.match(/^<\/\w/)) { if (pad != 0) { pad -= 1; } } else if (node.match(/^<\w[^>]*[^/]$/)) { indent = 1; } else { indent = 0; } var padding = ''; for (var i = 0; i< pad; i++) { padding += ' '; } formattedXml += padding + node + '\r\n'; pad += indent; }); return formattedXml; } ``` 使用上述代碼，我們可以將返回的XML數據格式化為易讀的形式，并在控制臺中打印出來。這對于開發過程中調試和理解返回的數據非常有幫助。 總結而言，通過使用Ajax，我們可以在不刷新網頁的情況下與服務器交換數據。當服務器返回XML格式的數據時，我們可以借助瀏覽器的開發者工具查看返回的XML數據，并使用`XMLSerializer`對象和自定義的格式化函數將其格式化為易讀的形式。這使得我們能夠更好地理解和處理服務器返回的XML數據。