菜鸟简述Jquery中Ajax发送post请求及XML响应
在没有出现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="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();否则就会有多条描述和价格显示在页面。这样就能实现选择下拉列表中的汽车则显示该汽车的描述和价格。如下图：