在現(xiàn)代的網(wǎng)頁開發(fā)中，我們經(jīng)常需要從服務(wù)器獲取數(shù)據(jù)并實(shí)時(shí)更新頁面內(nèi)容。而AJAX（Asynchronous JavaScript and XML）技術(shù)的出現(xiàn)，極大地簡化了這一過程。AJAX使用JavaScript與服務(wù)器進(jìn)行異步通信，可以快速獲取數(shù)據(jù)并將其展示在頁面上。在此，我們將介紹如何使用AJAX來獲取兩種常見的數(shù)據(jù)類型：文本和JSON。

首先，讓我們來看一下如何使用AJAX獲取文本數(shù)據(jù)。假設(shè)我們正在開發(fā)一個(gè)天氣應(yīng)用程序，需要從服務(wù)器獲取最新的天氣情況。我們可以使用AJAX發(fā)送一個(gè)HTTP請求到服務(wù)器，并將從服務(wù)器獲取到的文本數(shù)據(jù)展示在頁面上。

<pre>var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=New%20York');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
document.getElementById('weather').innerHTML = response;
}
};
xhr.send();

上述代碼中，我們創(chuàng)建了一個(gè)XMLHttpRequest對象，并使用open()方法指定了HTTP請求的類型和URL。然后，我們通過onreadystatechange事件監(jiān)聽器來捕獲服務(wù)器的響應(yīng)。當(dāng)readyState屬性的值為4時(shí)，表示服務(wù)器響應(yīng)完成。同時(shí)，當(dāng)status屬性的值為200時(shí)，表示服務(wù)器返回成功。我們可以通過responseText屬性獲取服務(wù)器返回的文本數(shù)據(jù)，并將其設(shè)置為頁面中id為'weather'的元素的innerHTML屬性，從而將天氣數(shù)據(jù)展示在頁面上。

下面，讓我們來看一下如何使用AJAX獲取JSON數(shù)據(jù)。假設(shè)我們正在開發(fā)一個(gè)電影評分應(yīng)用程序，需要從服務(wù)器獲取最新的電影評分?jǐn)?shù)據(jù)。與獲取文本數(shù)據(jù)類似，我們可以使用AJAX發(fā)送一個(gè)HTTP請求到服務(wù)器，并將從服務(wù)器獲取到的JSON數(shù)據(jù)解析并展示在頁面上。

<pre>var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/movies');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var movies = response.movies;
var movieList = '';
for (var i = 0; i < movies.length; i++) {
movieList += '<li>' + movies[i].title + ' - ' + movies[i].rating + '</li>';
}
document.getElementById('movies').innerHTML = movieList;
}
};
xhr.send();

上述代碼中，我們同樣創(chuàng)建了一個(gè)XMLHttpRequest對象，并使用open()方法指定了HTTP請求的類型和URL。同樣，我們通過onreadystatechange事件監(jiān)聽器捕獲服務(wù)器的響應(yīng)。當(dāng)readyState屬性的值為4時(shí)，并且status屬性的值為200時(shí)，我們使用JSON.parse()方法將服務(wù)器返回的JSON數(shù)據(jù)解析為JavaScript對象。然后，我們遍歷該對象中的電影數(shù)據(jù)，并將每個(gè)電影的標(biāo)題和評分拼接為一個(gè)HTML列表項(xiàng)。最后，我們將拼接好的列表項(xiàng)設(shè)置為頁面中id為'movies'的元素的innerHTML屬性，從而將電影評分?jǐn)?shù)據(jù)展示在頁面上。

通過上述示例，我們可以看到，使用AJAX來獲取文本和JSON數(shù)據(jù)非常簡單。無論是獲取天氣數(shù)據(jù)、電影評分?jǐn)?shù)據(jù)，還是其他類型的數(shù)據(jù)，AJAX都能夠快速有效地滿足我們的需求，為網(wǎng)頁開發(fā)帶來了便利。