AJAX數據傳遞

當我們在網頁上進行交互時，經常會遇到需要從服務器獲取數據并在頁面上進行展示的情況。AJAX（Asynchronous JavaScript and XML）技術是一種通過異步方式從服務器獲取數據的方法，它可以在不刷新整個頁面的情況下更新頁面的部分內容，提供了更好的用戶體驗。

首先，讓我們來看一個簡單的例子，我們要通過AJAX從服務器獲取一個JSON格式的數據，并將其在頁面上展示出來。

function getData(){
const xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
const data = JSON.parse(xhr.responseText);
document.getElementById('result').innerHTML = data.message;
}
};
xhr.send();
}

在這個例子中，我們使用XMLHttpRequest對象來發送GET請求，并通過指定回調函數在服務器響應變化時進行處理。當readyState屬性等于4且status屬性等于200時，代表服務器響應成功，我們將獲取到的JSON數據解析并將其中的消息展示在頁面上。

除了GET請求外，我們還可以使用POST請求將數據傳遞給服務器。假設我們要向服務器提交一個包含用戶信息的表單：

function sendData(){
const xhr = new XMLHttpRequest();
const form = document.getElementById('user-form');
const data = new FormData(form);
xhr.open('POST', 'submit.php', true);
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
const response = JSON.parse(xhr.responseText);
document.getElementById('result').innerHTML = response.message;
}
};
xhr.send(data);
}

在這個例子中，我們使用FormData對象來收集表單數據，并將其作為參數發送給服務器。服務器響應成功后，我們將獲取到的JSON數據解析并將其中的消息展示在頁面上。

除了傳遞簡單的文本和表單數據，我們還可以通過AJAX傳遞和處理更復雜的數據，比如XML、JSON等。例如，我們可以從服務器獲取一段XML數據，并將其中的標題和摘要展示在頁面上：

function getXMLData(){
const xhr = new XMLHttpRequest();
xhr.open('GET', 'data.xml', true);
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
const xmlDoc = xhr.responseXML;
const titles = xmlDoc.getElementsByTagName('title');
const summaries = xmlDoc.getElementsByTagName('summary');
let resultHTML = '';
for(let i=0; i<titles.length; i++){
resultHTML += '<h2>' + titles[i].textContent + '</h2>';
resultHTML += '<p>' + summaries[i].textContent + '</p>';
}
document.getElementById('result').innerHTML = resultHTML;
}
};
xhr.send();
}

在這個例子中，我們通過responseXML屬性獲取到了服務器返回的XML數據，并使用方法getElementsByTagName從中提取了標題和摘要信息，并將其展示在HTML頁面上。

總結來說，AJAX可以通過異步方式從服務器獲取數據，并通過回調函數在頁面上展示這些數據。無論是文本、表單數據還是復雜的XML或JSON數據，都可以通過AJAX進行傳遞和處理。通過合理地利用AJAX技術，可以極大地增強網頁的交互性和用戶體驗。