AJAX，全稱為Asynchronous JavaScript and XML，即使用JavaScript進(jìn)行異步的XML數(shù)據(jù)交互技術(shù)。通過(guò)AJAX，網(wǎng)頁(yè)可以實(shí)現(xiàn)在不重新加載整個(gè)頁(yè)面的情況下，向服務(wù)器請(qǐng)求數(shù)據(jù)并將返回的數(shù)據(jù)進(jìn)行展示。這種技術(shù)的應(yīng)用非常廣泛，尤其在Web開(kāi)發(fā)中，經(jīng)常用于實(shí)現(xiàn)局部刷新、異步加載和數(shù)據(jù)交互等功能。本文將介紹AJAX發(fā)起HTTP請(qǐng)求的原理和方法，并通過(guò)詳細(xì)的舉例來(lái)說(shuō)明其應(yīng)用。

在使用AJAX發(fā)起HTTP請(qǐng)求時(shí)，常使用的是XMLHttpRequest對(duì)象。通過(guò)該對(duì)象創(chuàng)建一個(gè)HTTP請(qǐng)求，并在請(qǐng)求完成后通過(guò)回調(diào)函數(shù)進(jìn)行處理。以下是一個(gè)簡(jiǎn)單的例子：

var xhr = new XMLHttpRequest(); // 創(chuàng)建XMLHttpRequest對(duì)象
xhr.onreadystatechange = function() { // 狀態(tài)改變時(shí)的回調(diào)函數(shù)
if (xhr.readyState === 4 && xhr.status === 200) { // 請(qǐng)求完成并成功返回?cái)?shù)據(jù)
var data = JSON.parse(xhr.responseText); // 解析返回的JSON數(shù)據(jù)
// 處理返回的數(shù)據(jù)
}
};
xhr.open('GET', 'example.php', true); // 發(fā)起GET請(qǐng)求，example.php為目標(biāo)URL
xhr.send(); // 發(fā)送請(qǐng)求

上述代碼中，首先創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象xhr，并通過(guò)其onreadystatechange屬性指定了一個(gè)回調(diào)函數(shù)。在回調(diào)函數(shù)中，首先判斷xhr的readyState屬性是否為4，表示請(qǐng)求已完成，并且通過(guò)xhr.status屬性判斷請(qǐng)求是否成功。如果請(qǐng)求成功，可通過(guò)xhr.responseText屬性獲取返回的文本數(shù)據(jù)。

在實(shí)際開(kāi)發(fā)中，除了發(fā)起GET請(qǐng)求外，還常常需要發(fā)起POST請(qǐng)求來(lái)向服務(wù)器提交數(shù)據(jù)。以下是一個(gè)發(fā)起POST請(qǐng)求的例子：

var xhr = new XMLHttpRequest(); // 創(chuàng)建XMLHttpRequest對(duì)象
xhr.onreadystatechange = function() { // 狀態(tài)改變時(shí)的回調(diào)函數(shù)
if (xhr.readyState === 4 && xhr.status === 200) { // 請(qǐng)求完成并成功返回?cái)?shù)據(jù)
alert('提交成功！');
}
};
xhr.open('POST', 'example.php', true); // 發(fā)起POST請(qǐng)求，example.php為目標(biāo)URL
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 設(shè)置請(qǐng)求header
xhr.send('name=John&age=25'); // 發(fā)送請(qǐng)求，提交數(shù)據(jù)

上述代碼中，在發(fā)送POST請(qǐng)求前使用xhr.setRequestHeader方法設(shè)置請(qǐng)求的Content-Type頭，以指定請(qǐng)求的內(nèi)容類型為application/x-www-form-urlencoded，并通過(guò)xhr.send方法提交數(shù)據(jù)。在服務(wù)器端，可通過(guò)解析請(qǐng)求的參數(shù)來(lái)獲取提交的數(shù)據(jù)。

除了使用原生的XMLHttpRequest對(duì)象外，也可以使用第三方庫(kù)如jQuery中封裝的ajax方法來(lái)簡(jiǎn)化操作。以下是使用jQuery庫(kù)發(fā)起GET請(qǐng)求的例子：

$.ajax({
url: 'example.php', // 目標(biāo)URL
type: 'GET', // 請(qǐng)求類型為GET
success: function(data) { // 請(qǐng)求成功的回調(diào)函數(shù)
// 處理返回的數(shù)據(jù)
},
error: function() { // 請(qǐng)求失敗的回調(diào)函數(shù)
// 處理錯(cuò)誤
}
});

上述代碼中，使用$.ajax方法發(fā)起GET請(qǐng)求，并通過(guò)success參數(shù)指定請(qǐng)求成功時(shí)的處理函數(shù)，通過(guò)error參數(shù)指定請(qǐng)求失敗時(shí)的處理函數(shù)。在處理函數(shù)中，可以進(jìn)一步對(duì)返回的數(shù)據(jù)進(jìn)行處理，或者處理請(qǐng)求失敗的情況。

綜上所述，AJAX發(fā)起HTTP請(qǐng)求是實(shí)現(xiàn)網(wǎng)頁(yè)異步加載和數(shù)據(jù)交互的重要手段之一。無(wú)論是通過(guò)原生的XMLHttpRequest對(duì)象，還是通過(guò)庫(kù)如jQuery的封裝方法，都可以實(shí)現(xiàn)便捷高效的HTTP請(qǐng)求。通過(guò)舉例說(shuō)明了使用AJAX發(fā)起GET請(qǐng)求和POST請(qǐng)求的基本方法，希望能對(duì)讀者理解和使用AJAX有所幫助。