在前端開發中，我們經常會使用Ajax來實現頁面的無刷新更新和數據的異步加載。然而，有時候我們會遇到一個問題，就是在發送數據給服務器時，數據會被轉義。本文將從實際案例出發，深入探討這個問題，并給出解決方案。

以一個簡單的例子來說明這個問題。假設我們有一個表單，其中包含一個輸入框和一個提交按鈕。用戶在輸入框中輸入一些文本，并點擊提交按鈕，將輸入的文本發送給服務器。我們使用Ajax來實現這個功能。

<form id="myForm">
<input type="text" id="textInput" name="text" />
<button type="button" onclick="sendData()">提交</button>
</form>
<script>
function sendData() {
var text = document.getElementById("textInput").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "server.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 處理服務器返回的數據
}
}
xhr.send("text=" + text);
}
</script>

在上面的例子中，我們通過xhr.send方法將用戶輸入的文本發送給了服務器。然而，經過測試發現，服務器接收到的數據卻不是我們預期的結果。如果用戶輸入的文本中包含特殊字符，比如"<>""&"等，這些字符在發送過程中會被轉義成對應的HTML實體編碼。比如，如果用戶輸入了""，則服務器接收到的數據會變成"<script>alert('Hello')</script>"。

造成這個問題的原因是在發送數據時，瀏覽器會自動將待發送的內容進行轉義，以保證數據的安全傳輸。然而，有時候我們確實需要發送原始的數據到服務器，而不是轉義后的數據。

xhr.send("text=" + encodeURIComponent(text));

解決這個問題的方法是使用encodeURIComponent函數對待發送的數據進行編碼。這樣，無論用戶輸入的是什么樣的文本，都會被正確地發送到服務器。在服務器端，我們只需要對接收到的數據進行解碼即可。

綜上所述，當我們使用Ajax發送數據給服務器時，經常會遇到數據被轉義的問題。為了解決這個問題，我們可以使用encodeURIComponent函數對待發送的數據進行編碼，確保數據能夠正確地傳輸。