在前端開發中，我們經常需要使用Ajax和HTML來傳遞數據。通過Ajax向服務器發送請求，服務器返回數據后，我們可以使用HTML來接收并展示這些數據。本文將詳細介紹Ajax和HTML之間的數據傳遞過程，并通過舉例來加深理解。
在使用Ajax和HTML傳遞數據之前，我們需要了解什么是Ajax和HTML。Ajax（Asynchronous JavaScript and XML）是一種用于在后臺與服務器進行數據交換的技術，通過在不重新加載整個頁面的情況下更新部分網頁內容。而HTML（Hypertext Markup Language）是用于創建網頁結構的標記語言，它負責定義頁面的結構和布局。
下面是一個簡單的例子，說明如何使用Ajax和HTML傳遞數據。假設我們有一個網頁，里面有一個按鈕，當點擊按鈕時，會向服務器發送請求，獲取后臺返回的數據，并通過HTML展示在頁面上。代碼如下：
<!DOCTYPE html>
<html>
<body>
<h2>獲取服務器返回的數據</h2>
<button onclick="getData()">點擊獲取數據</button>
<p id="result"></p>
<script>
function getData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("result").innerHTML = this.responseText;
}
};
xhr.open("GET", "url", true);
xhr.send();
}
</script>
</body>
</html>