在前端開發中，經常會遇到需要將網頁內容從 GBK 編碼轉換為 UTF-8 編碼的情況。其中，Ajax 是一種非常常用的技術，它能夠通過異步方式在不刷新整個網頁的情況下更新網頁內容。本文將介紹如何使用 AJAX 進行 GBK 到 UTF-8 的編碼轉換，并通過實例來說明這個過程。

首先，讓我們來看一個需求。假設我們正在開發一個中英雙語網站，用戶可以通過搜索框輸入關鍵詞來搜索網站上的內容。如果用戶搜索的關鍵詞是中文，我們需要通過 AJAX 將關鍵詞從 GBK 編碼轉換為 UTF-8 編碼，然后發送到后端進行搜索。在得到搜索結果后，我們也需要將內容轉換回 GBK 編碼，并在網頁上正確顯示。

為了實現這個需求，我們可以使用 JavaScript 中的encodeURIComponent()函數將關鍵詞從 GBK 編碼轉換為 UTF-8 編碼。這個函數可以將字符串中的特殊字符編碼為它們的 UTF-8 表示。

var keyword = "你好";
var encodedKeyword = encodeURIComponent(keyword);
console.log(encodedKeyword); // Output: "%E4%BD%A0%E5%A5%BD"

可以看到，"你好" 被成功地轉換成了 "%E4%BD%A0%E5%A5%BD"，這就是它的 UTF-8 編碼表示。

在發送請求到后端之前，我們需要設置 XMLHttpRequest 對象的編碼類型為 UTF-8，這樣才能正確地發送含有中文字符的請求。

var request = new XMLHttpRequest();
request.open("GET", "http://example.com/search?keyword=" + encodedKeyword, true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
request.send();

在上面的代碼中，我們通過 setRequestHeader() 方法設置了請求頭的 Content-Type 為 "application/x-www-form-urlencoded;charSet=UTF-8"。這個設置告訴后端我們發送的數據是 UTF-8 編碼的。

當我們從后端獲取到搜索結果后，我們需要將結果從 UTF-8 編碼轉換為 GBK 編碼，然后在網頁上正確地顯示出來。這可以通過 JavaScript 中的 decodeURIComponent() 函數來實現。

var response = "%E4%BD%A0%E5%A5%BD";
var decodedResponse = decodeURIComponent(response);
console.log(decodedResponse); // Output: "你好"

可以看到，"%E4%BD%A0%E5%A5%BD" 被成功地轉換成了 "你好"，這就是它的 GBK 編碼表示。

總結來說，在使用 AJAX 進行 GBK 到 UTF-8 的編碼轉換時，我們需要使用encodeURIComponent()函數將數據從 GBK 編碼轉換為 UTF-8 編碼，并在發送請求前設置 XMLHttpRequest 對象的編碼類型為 UTF-8。在獲取到響應后，我們需要使用decodeURIComponent()函數將響應從 UTF-8 編碼轉換為 GBK 編碼，以正確地顯示在網頁上。