AJAX（Asynchronous JavaScript and XML）是一種用于在后臺與服務(wù)器進行數(shù)據(jù)交換的技術(shù)，可以實現(xiàn)頁面無刷新更新部分內(nèi)容的功能。在使用AJAX請求數(shù)據(jù)時，服務(wù)器往往返回的是原始的數(shù)據(jù)，如JSON格式或XML格式，為了更好地展示這些數(shù)據(jù)，我們需要對其進行格式化。本文將會詳細介紹如何使用AJAX請求數(shù)據(jù)并對其進行格式化。

假設(shè)我們要使用AJAX請求一個電影信息的API接口，該接口返回的是一個JSON格式的數(shù)據(jù)。我們可以使用XMLHttpRequest對象來發(fā)送AJAX請求，并通過獲取到的響應(yīng)數(shù)據(jù)進行格式化。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.movies.com/movie/1', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
const movie = JSON.parse(xhr.responseText);
// 格式化電影信息
console.log(電影名稱：${movie.title});
console.log(導(dǎo)演：${movie.director});
console.log(評分：${movie.rating});
} else {
console.error('請求出錯');
}
}
};
xhr.send();

在上面的代碼中，我們使用XMLHttpRequest對象發(fā)送了一個GET請求，請求電影信息的API接口，并使用JSON.parse函數(shù)將返回的JSON格式的數(shù)據(jù)解析成一個JavaScript對象。然后，我們可以通過該對象的屬性來訪問并展示電影的名稱、導(dǎo)演和評分等信息。

當(dāng)然，我們也可以使用更加簡潔高效的方式來發(fā)送AJAX請求和格式化數(shù)據(jù)。現(xiàn)代框架如Vue、React和Angular等已經(jīng)提供了更加友好的AJAX請求方式，并且在數(shù)據(jù)展示方面也可以輕松地實現(xiàn)格式化。

例如，使用Vue框架發(fā)送AJAX請求并格式化數(shù)據(jù)的代碼如下：

new Vue({
el: '#app',
data: {
movie: {}
},
mounted() {
axios.get('https://api.movies.com/movie/1')
.then(response => {
this.movie = response.data;
// 格式化電影信息
console.log(電影名稱：${this.movie.title});
console.log(導(dǎo)演：${this.movie.director});
console.log(評分：${this.movie.rating});
})
.catch(error => {
console.error(error);
});
}
});

在上述代碼中，我們使用Vue框架的axios庫發(fā)送了一個GET請求，并將返回的數(shù)據(jù)賦值給Vue實例中的movie屬性。然后，我們同樣可以通過該屬性的值來展示電影的名稱、導(dǎo)演和評分等信息。

總結(jié)起來，使用AJAX請求數(shù)據(jù)后，我們可以通過解析返回的JSON或XML數(shù)據(jù)，并使用相應(yīng)的屬性來訪問和展示數(shù)據(jù)。如何格式化數(shù)據(jù)取決于我們的需求，可以簡單地通過字符串拼接形式展示，也可以使用現(xiàn)代框架提供的更方便的方式來展示，使頁面的數(shù)據(jù)更加美觀和易讀。