html ajax post xml,菜鸟简述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代码：

$( 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("

$('#tips').html('描述:'

+ $(data).find('desc').text() + ' 价格:'

+ $(data).find('price').text());

},

error: function(){

//失败调用该函数

alert('系统出错');

}

});

});

});

为了能让各位园友看得更直观，jsp页面中还有如下html代码:

卡宴turbo

宝马x6m

猎豹

以上为客户端代码，为能够响应请求，我们需在服务器端写好一个Servlet来响应请求，目的是用户选择相应的汽车后能给用户该汽车的描述和价格，并且以xml类型的数据进行返回。服务器端代码如下：

response.setContentType("text/xml;charset=utf-8");

String carName = request.getParameter("carName");

StringBuffer sb = new StringBuffer();

sb.append("");

if(carName.equals("cayene")){

sb.append("跑得很快，也很好看");

sb.append("1000000");

} else if(carName.equals("x6m")){

sb.append("跑得最快，但不好看");

sb.append("2000000");

} else{

sb.append("白领的最爱");

sb.append("200000");

}

sb.append("");

out.println(sb.toString());

服务器端的Servlet是以*.do后缀匹配的形式匹配请求资源路径，当请求资源路径为car2.do时服务器端通过取子串可以将car2取出后作出相应的响应。同时需要注意每次显示服务器端返回的内容时需将之前的内容清空，也就是$('#tips').remove();否则就会有多条描述和价格显示在页面。这样就能实现选择下拉列表中的汽车则显示该汽车的描述和价格。如下图：