Ajax(Asynchronous JavaScript and XML)是一種用于在網頁上進行異步數據傳輸的技術。其中,使用GET方法傳值的方式,常常通過在URL的末尾添加問號和參數來實現。這種方式簡單、直接,而且可以通過舉例來更好地理解。
比如,假設有一個網頁需要根據用戶選擇的城市來顯示相應的天氣信息。在傳統的方式中,當用戶選擇一個城市,網頁會重新加載整個頁面。但是,使用Ajax的GET方式傳值,我們可以在不刷新頁面的情況下更新天氣信息。
function getWeather(city) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById("weather").innerHTML = xhr.responseText; } }; xhr.open("GET", "getWeather.php?city=" + city, true); xhr.send(); }
在上面的例子中,我們通過調用getWeather函數并傳入城市名作為參數,來獲取天氣信息。首先,我們創建一個XMLHttpRequest對象,并設置一個回調函數,以便在接收到響應時處理數據。然后,我們使用open方法指定了GET方法和請求的URL,其中通過添加問號和參數來傳值。最后,我們使用send方法發送請求。
另一個例子是購物網站中的搜索功能。當用戶在搜索框中輸入關鍵詞并點擊搜索按鈕,網頁會發送一個GET請求,將關鍵詞作為URL的一部分來傳遞給服務器。服務器根據關鍵詞來搜索商品,并返回相應的結果,網頁在不刷新頁面的情況下將結果展示給用戶。
function searchProducts(keyword) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var products = JSON.parse(xhr.responseText); displayProducts(products); } }; xhr.open("GET", "search.php?keyword=" + keyword, true); xhr.send(); }
在上面的例子中,我們在搜索函數中傳遞了關鍵詞作為參數,并將其添加到GET請求的URL中。當服務器返回結果時,我們將結果解析為JSON格式,并通過displayProducts函數來展示商品。
總之,通過在URL中添加問號和參數,使用GET方法傳值是一種簡單直接的方式,適用于需要傳遞少量數據或者不需要保密性的情況。而且,Ajax的GET方式傳值可以使網頁在不刷新的情況下更新數據,提高用戶體驗。