AJAX（Asynchronous JavaScript and XML）是一種用于創(chuàng)建快速交互式網(wǎng)頁(yè)應(yīng)用程序的技術(shù)。它能夠在不刷新整個(gè)頁(yè)面的情況下從服務(wù)器獲取數(shù)據(jù)，并且能夠?qū)⑦@些數(shù)據(jù)展示給用戶。

一種常見(jiàn)的使用場(chǎng)景是通過(guò)AJAX上傳文件并獲取返回的JSON數(shù)據(jù)。假設(shè)我們正在開(kāi)發(fā)一個(gè)圖片上傳網(wǎng)站，我們希望用戶能夠選擇并上傳自己的圖片，然后服務(wù)器將返回一個(gè)JSON對(duì)象，包含了圖片的URL、尺寸等信息。我們可以使用AJAX技術(shù)來(lái)實(shí)現(xiàn)這個(gè)功能。

首先，我們需要在HTML頁(yè)面中創(chuàng)建一個(gè)文件選擇輸入框和一個(gè)用于展示上傳結(jié)果的區(qū)域：

<input type="file" id="fileInput" />
<div id="result" style="display:none;"></div>

然后，在JavaScript中編寫(xiě)處理AJAX請(qǐng)求的代碼：

var fileInput = document.getElementById('fileInput');
var resultDiv = document.getElementById('result');
fileInput.addEventListener('change', function() {
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
resultDiv.innerHTML = xhr.responseText;
// 解析JSON數(shù)據(jù)并顯示
var jsonData = JSON.parse(xhr.responseText);
resultDiv.innerHTML = '圖片URL: ' + jsonData.url + '<br>';
resultDiv.innerHTML += '圖片尺寸: ' + jsonData.size;
}
};
xhr.send(formData);
});

在上述代碼中，我們首先獲取了文件輸入框和結(jié)果展示區(qū)域的DOM元素。

然后，我們給文件輸入框添加了一個(gè)change事件監(jiān)聽(tīng)器。當(dāng)用戶選擇了文件后，事件處理函數(shù)會(huì)被觸發(fā)。

在事件處理函數(shù)中，我們首先獲取了用戶選擇的文件，然后創(chuàng)建了一個(gè)FormData對(duì)象，并將文件添加到FormData中。

接下來(lái)，我們創(chuàng)建了XMLHttpRequest對(duì)象，并指定了請(qǐng)求的方法、URL和是否使用異步模式。我們還設(shè)置了XMLHttpRequest對(duì)象的onreadystatechange事件處理函數(shù)，用于在請(qǐng)求狀態(tài)改變時(shí)獲取服務(wù)器返回的數(shù)據(jù)。

最后，我們發(fā)送了AJAX請(qǐng)求，并將FormData作為請(qǐng)求的體內(nèi)容。

當(dāng)服務(wù)器返回?cái)?shù)據(jù)時(shí)，我們首先將服務(wù)器返回的文本展示到結(jié)果展示區(qū)域。然后，我們使用JSON.parse函數(shù)解析了返回的JSON數(shù)據(jù)，并將其中的圖片URL和尺寸展示到結(jié)果展示區(qū)域。

以上就是通過(guò)AJAX上傳文件并獲取返回JSON數(shù)據(jù)的實(shí)現(xiàn)過(guò)程。這個(gè)示例只是一個(gè)簡(jiǎn)單的演示，實(shí)際應(yīng)用中可能會(huì)有更多的處理邏輯和錯(cuò)誤處理。但是通過(guò)AJAX，我們可以方便地進(jìn)行文件上傳并獲取返回的JSON數(shù)據(jù)，實(shí)現(xiàn)更加交互式和動(dòng)態(tài)的網(wǎng)頁(yè)應(yīng)用程序。