由于現代網站的交互性越來越強，用戶對于頁面的實時更新和數據的快速加載等需求也越來越迫切。本文將介紹使用Ajax（Asynchronous JavaScript and XML）和JSON（JavaScript Object Notation）來完成三聯動的方法，通過這種技術可以實現頁面的異步加載和數據的跨域傳輸，提升用戶體驗。

首先，我們來看一個簡單的例子。假設我們有一個網頁，上面有一個按鈕，當用戶點擊按鈕時，會通過Ajax從服務器請求一段文字，并將其顯示在頁面上。使用Ajax可以在不刷新整個頁面的情況下，只更新這部分文字，減少了用戶等待的時間。

<button onclick="loadData()">點擊我加載數據</button><p id="dataArea"></p><script>function loadData() {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("dataArea").innerText = xhr.responseText;
}
};
xhr.open("GET", "data.txt", true);
xhr.send();
}
</script>

在上面的代碼中，我們創建了一個XMLHttpRequest對象，通過其open方法指定了請求的方式和URL，并通過send方法發送請求。當readyState和status滿足我們的條件時，我們將服務器返回的內容更新到頁面上。

除了文本，Ajax還可以通過發送和接收JSON數據來實現更復雜的交互。下面我們來看一個例子，假設我們有一個網站，提供了一個城市搜索功能。用戶在輸入框中輸入城市名稱，網站會通過Ajax從服務器請求匹配的城市列表，并將其以JSON的形式返回。然后，我們可以使用JavaScript將這些城市列表動態地顯示在頁面上。

<input type="text" id="cityInput"><ul id="cityList"></ul><script>document.getElementById("cityInput").addEventListener("keyup", function() {
let keyword = this.value;
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
let cityList = JSON.parse(xhr.responseText);
let cityHtml = "";
for (let i = 0; i< cityList.length; i++) {
cityHtml += "<li>" + cityList[i] + "</li>";
}
document.getElementById("cityList").innerHTML = cityHtml;
}
};
xhr.open("GET", "search.php?keyword=" + keyword, true);
xhr.send();
});
</script>

在上述代碼中，我們通過事件監聽器來實時監聽輸入框中的值變化。當用戶輸入時，我們通過Ajax向服務器發送請求，攜帶了用戶輸入的關鍵詞。服務器接收到請求后返回匹配的城市列表，我們通過JSON.parse方法將返回的JSON字符串轉換為JavaScript對象。然后，我們使用for循環遍歷這個列表，將每個城市的名字包裝在li標簽中，并拼接到cityHtml變量中。最后，我們將cityHtml更新到頁面的ul元素中。

通過使用Ajax和JSON，我們可以實現網站的三聯動效果。用戶輸入內容后，頁面會實時從服務器請求數據并更新，給用戶帶來良好的交互體驗。希望通過本文的介紹，讀者能夠對Ajax和JSON有更深入的了解，并能在實際項目中使用它們來完成更多的功能。