在沒有出現jquery前，是通過純手工的方式獲取XmlHttpRequest對象來向服務器發送異步請求實現局部刷新。在jquery出現以后我們利用其封裝好的對象來實現ajax請求，下面以post請求為例作一個簡單介紹：
jQuery.post(url, [data], [callback], [type])，其中url為請求地址，data為待發送的參數及其值，callback為發送成功時的回調函數，type為返回內容的類型(xml、html、text、json等)。為了能夠使用jquery中的ajax，首先需在jsp頁面中導入juery.js文件，然后在jsp頁面中寫如下一段js代碼：
<script type="text/javascript">
$(function(){
$('#s1').change(function(){
$('#tips').remove();
var carName = $(this).val();
$.ajax({
url:'car2.do',
type:'post',
data: 'carName=' + carName,
dataType:'xml',
success:function(data){
//成功之后調用該函數
//data:服務器返回的數據，
//如果服務器返回的是一個xml文檔
//需要調用$(data),將xml轉換成一個jQuery對象
$('#s1').after("<div id='tips'></div>");
$('#tips').html('描述:'
+ $(data).find('desc').text() + ' 價格:'
+ $(data).find('price').text());
},
error:function(){
//失敗調用該函數
alert('系統出錯');
}
});
});
});
</script>
為了能讓各位園友看得更直觀，jsp頁面中還有如下html代碼:
<div>
<select id="s1" style="width:120px;">
<option value="cayene">卡宴turbo</option>
<option value="x6m">寶馬x6m</option>
<option value="bb">獵豹</option>
</select>
</div>
以上為客戶端代碼，為能夠響應請求，我們需在服務器端寫好一個Servlet來響應請求，目的是用戶選擇相應的汽車后能給用戶該汽車的描述和價格，並且以xml類型的數據進行返回。服務器端代碼如下：
response.setContentType("text/xml;charset=utf-8");
String carName = request.getParameter("carName");
StringBuffer sb = new StringBuffer();
sb.append("<car>");
if(carName.equals("cayene")){
sb.append("<desc>跑得很快，也很好看</desc>");
sb.append("<price>1000000</price>");
}else if(carName.equals("x6m")){
sb.append("<desc>跑得最快，但不好看</desc>");
sb.append("<price>2000000</price>");
}else{
sb.append("<desc>白領的最愛</desc>");
sb.append("<price>200000</price>");
}
sb.append("</car>");
out.println(sb.toString());
服務器端的Servlet是以*.do后綴匹配的形式匹配請求資源路徑，當請求資源路徑為car2.do時服務器端通過取子串可以將car2取出后作出相應的響應。同時需要注意每次顯示服務器端返回的內容時需將之前的內容清空，也就是$('#tips').remove();否則就會有多條描述和價格顯示在頁面。這樣就能實現選擇下拉列表中的汽車則顯示該汽車的描述和價格。如下圖：
