今天我們來聊一聊Ajax的基礎和Servlet的關系。Ajax（Asynchronous JavaScript and XML）是一種在不重新加載整個頁面的情況下，通過異步請求與服務器進行數據交互的技術。而Servlet是Java編寫的服務器端組件，用于處理客戶端的請求并返回響應。作為Web開發的重要組成部分，Ajax和Servlet的結合使用能夠極大地提升用戶體驗。

舉個例子，假設我們正在開發一個在線查詢天氣預報的應用。當用戶輸入城市名并點擊查詢按鈕時，我們可以通過Ajax技術將用戶的請求發送給Servlet，然后Servlet獲取城市名，并從天氣預報接口中獲取相應的天氣數據。最后再將獲取到的天氣數據通過Ajax返回給前端頁面，實現無刷新更新天氣信息的效果。

在這個例子中，我們需要用到Ajax來實現異步請求的功能，而Servlet則負責處理這個請求。當用戶點擊查詢按鈕時，綁定的事件觸發Ajax請求，可以通過一個XMLHttpRequest對象發送HTTP請求給Servlet。Servlet中可以通過獲取請求參數的方式獲取用戶輸入的城市名，并調用相應的接口來獲取天氣數據。最后，將天氣數據以某種格式（如JSON）返回給前端頁面，實現數據的展示。

function getWeather() {
var cityName = document.getElementById("city").value;
var xhr = new XMLHttpRequest();
xhr.open("GET", "weatherServlet?city=" + cityName, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var weatherData = JSON.parse(xhr.responseText);
document.getElementById("result").innerHTML = weatherData;
}
};
xhr.send();
}

在上述代碼中，我們通過XMLHttpRequest對象創建了一個GET請求，并將用戶輸入的城市名作為查詢參數拼接在URL中。當請求狀態為4（請求已完成）且HTTP狀態為200（成功）時，說明請求已經完成并且響應正常。此時，我們將返回的天氣數據解析為JSON格式，并將其展示在頁面中的某個元素中。

除了GET請求，Ajax還支持POST請求。我們可以通過設置XMLHttpRequest對象的open方法的第三個參數為true，來實現異步請求的功能。而且，在Servlet中，我們也可以通過doGet和doPost方法來處理相應的GET和POST請求。比如，當用戶通過Ajax發送POST請求時，我們可以在Servlet的doPost方法中處理該請求，并返回相應的數據給前端。

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String cityName = request.getParameter("city");
// 處理請求并獲取天氣數據
String weatherData = getWeatherData(cityName);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(weatherData);
}

在Servlet中，我們可以通過HttpServletRequest的getParameter方法獲取前端發送的請求參數。然后，可以根據城市名調用相應的接口獲取天氣數據，并將其以JSON格式返回給前端。

通過以上的例子，我們可以看到Ajax和Servlet之間的緊密配合。Ajax負責發起異步請求，并接受來自Servlet的響應，而Servlet則負責處理Ajax的請求，并返回相應的數據。他們的結合使用能夠大大提升Web應用的用戶體驗，使頁面更加動態、友好。