本文將討論通過AJAX獲取非JSON數(shù)據(jù)類型的方法。在傳統(tǒng)的AJAX請求中，常用的數(shù)據(jù)類型是JSON，因?yàn)樗粡V泛應(yīng)用于后端和前端之間的數(shù)據(jù)交互。然而，有時(shí)我們也會遇到返回其他類型的數(shù)據(jù)，比如HTML、XML或文本等。雖然這些數(shù)據(jù)類型不太常見，但了解如何獲取并處理它們?nèi)匀皇呛苡杏玫摹?/p>

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

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對象發(fā)送一個(gè)GET請求，獲取example.html文件的內(nèi)容。當(dāng)請求完成后，onreadystatechange事件會被觸發(fā)，我們可以通過xhr.responseText來獲取返回的文本內(nèi)容。

當(dāng)然，這只是一個(gè)獲取文本數(shù)據(jù)的例子。接下來，我們將討論如何獲取其他類型的數(shù)據(jù)。

獲取HTML數(shù)據(jù)

有時(shí)候，我們需要獲取一個(gè)HTML文件的內(nèi)容，比如獲取一個(gè)頁面的一部分來進(jìn)行局部更新。這個(gè)時(shí)候，我們可以通過AJAX請求獲取HTML數(shù)據(jù)。

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進(jìn)行操作
}
};
xhr.send();

在這個(gè)例子中，我們發(fā)送一個(gè)GET請求獲取example.html文件的內(nèi)容。當(dāng)請求完成后，我們可以通過xhr.responseText來獲取該HTML文件的內(nèi)容，然后可以通過responseHTML變量進(jìn)行操作。

舉一個(gè)例子，假設(shè)我們的頁面中有一個(gè)<div>標(biāo)簽，并希望通過AJAX獲取example.html文件中的內(nèi)容并放入該<div>標(biāo)簽中。可以使用下面的代碼實(shí)現(xiàn)：

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內(nèi)容賦值給responseHTML變量，我們能夠方便地操作這部分HTML。

獲取XML數(shù)據(jù)

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

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進(jìn)行操作
}
};
xhr.send();

這段代碼發(fā)送一個(gè)GET請求獲取example.xml文件的內(nèi)容。當(dāng)請求完成后，我們可以通過xhr.responseXML來獲取返回的XML文件內(nèi)容。

舉一個(gè)例子，假設(shè)我們的XML文件如下所示：

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

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

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內(nèi)容，我們可以使用DOM方法和屬性來解析和處理這個(gè)XML文件。在這個(gè)例子中，我們通過responseXML.getElementsByTagName()獲取所有的<person>元素，然后通過getElementsByTagName()方法獲取<name>和<age>元素的內(nèi)容。

獲取文本數(shù)據(jù)

如果我們需要獲取純文本文件的內(nèi)容，比如一個(gè)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數(shù)據(jù)和XML數(shù)據(jù)的例子非常相似，只是我們將返回的內(nèi)容存儲在responseText變量中，并使用它進(jìn)行操作。

總結(jié)來說，通過AJAX獲取非JSON數(shù)據(jù)類型的方法，我們可以使用XMLHttpRequest對象來發(fā)送請求，并通過xhr.onreadystatechange來處理返回的數(shù)據(jù)。對于HTML、XML和文本數(shù)據(jù)類型，我們分別使用xhr.responseText、xhr.responseXML和xhr.responseText來獲取相應(yīng)的返回內(nèi)容，并使用它們進(jìn)行操作。