ajax_get/post_兩級聯動
使用ajax實現菜單聯動
通常情況下，GET請求用於從服務器上獲取數據，POST請求用於向服務器發送數據。
需求：選擇第一個下拉框的值，根據第一個下拉框的值顯示第二個下拉框的值
- 首先使用GET方式。
客戶端HTML頁面顯示第一個下拉選擇框，給當前下拉選擇框選擇某個選項後，通過XMLHttpRequest向服務器發送請求，請求動態顯示第二個下拉選擇框。下面是對應的HTML頁面的代碼。
程序清單：Ajax02request/get/first.html
|
<!DOCTYPE html> <html> <head> <meta name="author" <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>發送GET請求</title> <!-- 給select標簽添加樣式 --> <style type="text/css"> select { width: 160px; font-size: 11pt; } </style> </head> <body> <select name="first" id="first" <option value="0">---請選擇---</option> <option value="1" >中國</option> <option value="2">美國</option> <option value="3">日本</option> </select> <select name="second" id="second"></select> <script type="text/javascript" // 定義了XMLHttpRequest對象 var xmlrequest; // 完成XMLHttpRequest對象的初始化 function createXMLHttpRequest(){ if(window.XMLHttpRequest){ // DOM 2瀏覽器 xmlrequest = new XMLHttpRequest(); }else if (window.ActiveXObject){ // IE瀏覽器 try{ xmlrequest = new ActiveXObject("Msxml2.XMLHTTP"); }catch (e){ try{ xmlrequest = new ActiveXObject("Microsoft.XMLHTTP"); }catch (e){ } } } } // 事件處理函數，當下拉列表選擇改變時，觸發該事件 function change(id){ // 初始化XMLHttpRequest對象 createXMLHttpRequest(); // 設置請求響應的URL var uri = "second.jsp?id=" + id; // 設置處理響應的回調函數 xmlrequest.onreadystatechange = processResponse; // 打開與服務器響應地址的連接 xmlrequest.open("GET", uri, true); // 發送請求 xmlrequest.send(null); } // 定義處理響應的回調函數 function processResponse(){ //響應完成且響應正常 if (xmlrequest.readyState == 4){ if (xmlrequest.status == 200){ // 將服務器響應以$符號分隔成字符串數組 var cityList = xmlrequest.responseText.split("$"); // 獲取用於顯示菜單的下拉列表 var displaySelect = document.getElementById("second"); // 將目標下拉列表清空 displaySelect.innerHTML = null; // 以字符串數組的每個元素創建option， // 並將這些選項添加到下拉列表中 for (var i = 0 ; i < cityList.length ; i++){ // 創建一個<option.../>元素 var op = document.createElement("option"); op.innerHTML = cityList[i]; // 將新的選項添加到列表框的最後 displaySelect.appendChild(op); } }else{ //頁面不正常 window.alert("您所請求的頁面有異常。"); } } } // 指定頁面加載完成後指定change(id)函數 document.body.onload = change(document.getElementById("first").value); </script> </body> </html> |
采用GET請求將父菜單的ID作為參數發送，根據ID顯示第二個下拉框的值。服務器響應頁面的代碼如下。
程序清單：Ajax02request/get/second.jsp
|
<%@ page contentType="text/html; charset=UTF-8" language="java"%> <% String idStr = (String)request.getParameter("id"); int id = idStr == null ? 1 : Integer.parseInt(idStr); switch(id){ case 1: out.println("上海$廣州$北京"); break; case 2: out.println("華盛頓$紐約$加州"); break; case 3: out.println("東京$大板$福岡"); break; } %> |
上面jsp頁面作為服務器響應非常簡單：先讀取請求參數，當請求id為1時，返回三個中國城市；當請求id為2時，返回三個美國城市；當請求id為3時，返回三個日本城市。
在瀏覽器中瀏覽該頁面，並改變左邊下拉列表的選中項，將看到下圖效果：
- 使用POST方式
POST請求的適應性更廣，可使用更大的請求參數。而且POST請求的請求參數在頁面跳轉時，不能在鏈接地址中直接看到，保密性更好。因此在使用Ajax發送請求時，盡量采用POST方式而不是GET方式發送請求。發送POST請求通常需要如下三個步驟：
- 使用open方法打開連接時，指定使用POST方式發送請求。
- 設置正確的請求頭，POST請求通常應設置Content-Type請求頭。
- 發送請求，把請求參數轉為查詢字符串，將該字符串作為send（）方法的參數。
對於上面的應用，使用POST方式實現，只需要改一個請求的發送方法，如下所示：
|
// 事件處理函數，當下拉列表選擇改變時，觸發該事件 function change(id) { // 初始化XMLHttpRequest對象 createXMLHttpRequest(); // 設置請求響應的URL var uri = "second.jsp"; // 設置處理響應的回調函數 xmlrequest.onreadystatechange = processResponse; // 設置以POST方式發送請求，並打開連接 xmlrequest.open("POST", uri, true); // 設置POST請求的請求頭,表示數據被編碼為名稱/值對 xmlrequest.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded"); // 發送請求 xmlrequest.send("id="+id); } |
其余的部分則無須改變，應用的執行效果與采用GET方式發送請求的效果完全一樣。事實上，即使采用POST方式發送請求，一樣可以將請求參數附加在請求的URL之後。如果send方法沒有請求參數，應傳入null，因為有些瀏覽器規定了send方法必須傳入參數。代碼如下：
|
// 事件處理函數，當下拉列表選擇改變時，觸發該事件 function change(id) { // 初始化XMLHttpRequest對象 createXMLHttpRequest(); // 設置請求響應的URL var uri = "second.jsp?id="+id; // 設置處理響應的回調函數 xmlrequest.onreadystatechange = processResponse; // 設置以POST方式發送請求，並打開連接 xmlrequest.open("POST", uri, true); // 設置POST請求的請求頭 xmlrequest.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded"); // 發送請求 xmlrequest.send(null); } |
ajax_get/post_兩級聯動