AJAX（Asynchronous JavaScript and XML）技術(shù)是一種在不刷新整個(gè)頁面的情況下進(jìn)行異步數(shù)據(jù)交互的技術(shù)。在Web開發(fā)中，經(jīng)常需要使用AJAX來實(shí)現(xiàn)與后臺(tái)交互數(shù)據(jù)的功能，其中一個(gè)常見的應(yīng)用場(chǎng)景就是通過按鈕點(diǎn)擊觸發(fā)AJAX請(qǐng)求來獲取數(shù)據(jù)并更新頁面內(nèi)容。以一個(gè)簡(jiǎn)單的按鈕點(diǎn)擊獲取天氣信息為例，我們來看一下如何使用原生的AJAX代碼實(shí)現(xiàn)。

首先，我們需要在HTML中定義一個(gè)按鈕，并通過JavaScript代碼給該按鈕綁定一個(gè)點(diǎn)擊事件的監(jiān)聽器。當(dāng)按鈕被點(diǎn)擊時(shí)，我們將觸發(fā)AJAX請(qǐng)求來獲取天氣信息：

獲取天氣

接下來，我們需要在AJAX請(qǐng)求的監(jiān)聽器函數(shù)中編寫AJAX請(qǐng)求的代碼。在這個(gè)例子中，我們可以使用XMLHttpRequest對(duì)象來發(fā)送我們的AJAX請(qǐng)求，并使用open()方法來指定請(qǐng)求的類型和URL：

document.getElementById("getWeatherBtn").addEventListener("click", function() {
// 創(chuàng)建XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest();
// 打開AJAX請(qǐng)求
xhr.open("GET", "https://api.weather.com/forecast?city=beijing", true); // 以GET方式請(qǐng)求天氣API
// 發(fā)送AJAX請(qǐng)求
xhr.send();
// 監(jiān)聽AJAX請(qǐng)求的狀態(tài)改變
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText); // 解析AJAX請(qǐng)求的響應(yīng)數(shù)據(jù)
// 更新頁面上的天氣信息
document.getElementById("weatherInfo").innerHTML = response.weather;
}
}
});

在代碼中，我們首先使用XMLHttpRequest()構(gòu)造函數(shù)創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象，然后使用open()方法指定了我們的AJAX請(qǐng)求的類型為GET，目標(biāo)URL為天氣API的地址，并設(shè)置了是否使用異步請(qǐng)求。然后，我們使用send()方法發(fā)送了我們的AJAX請(qǐng)求，并在onreadystatechange事件中監(jiān)聽了AJAX請(qǐng)求狀態(tài)的改變。

當(dāng)AJAX請(qǐng)求的狀態(tài)變?yōu)?（即完成）時(shí)，我們通過responseText屬性獲取到了服務(wù)器返回的響應(yīng)數(shù)據(jù)，并使用JSON.parse()方法對(duì)其進(jìn)行解析。最后，我們將解析后的天氣數(shù)據(jù)更新到頁面上指定的元素中。

通過以上代碼，我們成功實(shí)現(xiàn)了當(dāng)點(diǎn)擊按鈕時(shí)觸發(fā)AJAX請(qǐng)求，并將獲取到的天氣信息更新到頁面上。這個(gè)例子只是一個(gè)簡(jiǎn)單的示例，實(shí)際項(xiàng)目中，我們還可以根據(jù)實(shí)際需求來添加更多的功能，例如添加loading效果、異常處理等等。使用原生的AJAX代碼可以讓我們更加靈活地控制AJAX請(qǐng)求的細(xì)節(jié)，提供更好的用戶體驗(yàn)。