本文將討論通過AJAX獲取非JSON數據類型的方法。在傳統的AJAX請求中，常用的數據類型是JSON，因為它被廣泛應用于后端和前端之間的數據交互。然而，有時我們也會遇到返回其他類型的數據，比如HTML、XML或文本等。雖然這些數據類型不太常見，但了解如何獲取并處理它們仍然是很有用的。

在處理非JSON數據類型之前，我們首先要明確如何使用AJAX進行請求。一種常見的做法是使用XMLHttpRequest對象，它具有一系列的方法和屬性，可以用于發送和接收數據。下面是一個簡單的例子：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.html', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();

這段代碼使用XMLHttpRequest對象發送一個GET請求，獲取example.html文件的內容。當請求完成后，onreadystatechange事件會被觸發，我們可以通過xhr.responseText來獲取返回的文本內容。

當然，這只是一個獲取文本數據的例子。接下來，我們將討論如何獲取其他類型的數據。

獲取HTML數據

有時候，我們需要獲取一個HTML文件的內容，比如獲取一個頁面的一部分來進行局部更新。這個時候，我們可以通過AJAX請求獲取HTML數據。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.html', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var responseHTML = xhr.responseText;
// 使用responseHTML進行操作
}
};
xhr.send();

在這個例子中，我們發送一個GET請求獲取example.html文件的內容。當請求完成后，我們可以通過xhr.responseText來獲取該HTML文件的內容，然后可以通過responseHTML變量進行操作。

舉一個例子，假設我們的頁面中有一個<div>標簽，并希望通過AJAX獲取example.html文件中的內容并放入該<div>標簽中。可以使用下面的代碼實現：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.html', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var responseHTML = xhr.responseText;
var divElement = document.querySelector('div');
divElement.innerHTML = responseHTML;
}
};
xhr.send();

通過將返回的HTML內容賦值給responseHTML變量，我們能夠方便地操作這部分HTML。

獲取XML數據

在一些情況下，我們可能需要獲取一個XML文件的數據。XML是一種用于描述、存儲和傳輸數據的標記語言，通常用于與后端進行數據交互。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.xml', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var responseXML = xhr.responseXML;
// 使用responseXML進行操作
}
};
xhr.send();

這段代碼發送一個GET請求獲取example.xml文件的內容。當請求完成后，我們可以通過xhr.responseXML來獲取返回的XML文件內容。

舉一個例子，假設我們的XML文件如下所示：

<people>
<person>
<name>John</name>
<age>28</age>
</person>
<person>
<name>Jane</name>
<age>25</age>
</person>
</people>

我們可以通過以下代碼來獲取并處理這個XML文件的內容：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.xml', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var responseXML = xhr.responseXML;
var peopleList = responseXML.getElementsByTagName('person');
for (var i = 0; i < peopleList.length; i++) {
var name = peopleList[i].getElementsByTagName('name')[0].textContent;
var age = peopleList[i].getElementsByTagName('age')[0].textContent;
console.log('Name: ' + name + ', Age: ' + age);
}
}
};
xhr.send();

通過使用xhr.responseXML獲取返回的XML內容，我們可以使用DOM方法和屬性來解析和處理這個XML文件。在這個例子中，我們通過responseXML.getElementsByTagName()獲取所有的<person>元素，然后通過getElementsByTagName()方法獲取<name>和<age>元素的內容。

獲取文本數據

如果我們需要獲取純文本文件的內容，比如一個txt文件，可以使用類似的方法。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.txt', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var responseText = xhr.responseText;
console.log(responseText);
}
};
xhr.send();

該例子與獲取HTML數據和XML數據的例子非常相似，只是我們將返回的內容存儲在responseText變量中，并使用它進行操作。

總結來說，通過AJAX獲取非JSON數據類型的方法，我們可以使用XMLHttpRequest對象來發送請求，并通過xhr.onreadystatechange來處理返回的數據。對于HTML、XML和文本數據類型，我們分別使用xhr.responseText、xhr.responseXML和xhr.responseText來獲取相應的返回內容，并使用它們進行操作。