在這邊要紀錄的是一個簡單的Ajax、JQuery、Servlet聯合應用的簡單範例。
此例client端利用JQuery的Ajax語法來將表單中的參數傳給以Servlet實作的Server端，經由Server端處理過後，以JSON的格式回傳給client端， client端再將JSON格式的回傳值解析後做相應的動作，此例的動作為兩個：跳出視窗顯示回傳值、在html裡的filedset中顯示回傳值。
- 首先是作為client端的html內容，index.html:
<!DOCTYPE html>
<html>
<head>
<title>AjaxTest</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 加載Ajax -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<!-- Ajax的測試Script -->
<script>
//在網頁加載後，對id=doAjaxBtn的Button設定click的function
$(document).ready(function(){
$("#doAjaxBtn").click(function(){
$.ajax({
type:"POST", //指定http參數傳輸格式為POST
url: "doAjaxServlet.do", //請求目標的url，可在url內加上GET參數，如 www.xxxx.com?xx=yy&xxx=yyy
data: $("#formId").serialize(), //要傳給目標的data為id=formId的Form其序列化(serialize)為的值，之
//內含有name的物件value
dataType: "json", //目標url處理完後回傳的值之type，此列為一個JSON Object
//Ajax成功後執行的function，response為回傳的值
//此範列回傳的JSON Object的內容格式如右所示: {userName:XXX,uswerInterest:[y1,y2,y3,...]}
success : function(response){
//在id=ajaxResponse的fieldset中顯示Ajax的回傳值
$("#ajaxResponse").html("您的大名:"+response.userName+"</br>");
$("#ajaxResponse").append("您的興趣:</br>");
var userInterestString = "";
for(var i = 0 ; i<response.userInterest.length ; i++){
$("#ajaxResponse").append(response.userInterest[i]+"</br>");
userInterestString += "\n"+response.userInterest[i];
}
//用彈出視窗顯示Ajax的回傳值
alert("UserName:"+response.userName+"\nInterest: "+userInterestString);
},
//Ajax失敗後要執行的function，此例為印出錯誤訊息
error:function(xhr, ajaxOptions, thrownError){
alert(xhr.status+"\n"+thrownError);
}
});
});
});
</script>
</head>
<body>
<div>AjaxTest</div>
<form id="formId">
大名:<input type="text" name="userName">
<input type="checkbox" name="userInterest" value="看書" />看書
<input type="checkbox" name="userInterest" value="遊戲" />遊戲
<input type="checkbox" name="userInterest" value="電影" />電影
<input type="button" id="doAjaxBtn" value="啟動Ajax" />
</form>
<div id="anotherSection">
<!-- 用來顯示Ajax回傳值的fieldset -->
<fieldset>
<legend>Response from jQuery Ajax Request</legend>
<div id="ajaxResponse"></div>
</fieldset>
</div>
</body>
</html>
- 再來是Server端的Servlet，doAjaxServlet.java：
的符號，如下圖，按下它之後，將其中的「Compact Empty Middle Packages」的勾勾給勾選掉，這時所有的套件階層就不會用一行來表示，而是用一個樹狀階層的方式顯示，這樣就可以自行訂義套件各層的名字和位置了。
