ajax 菜鸟简述Jquery中Ajax发送post请求及XML响应

2023-11-09 04:18•html•阅读 2016

在没有出现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("<div ></div>");

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

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

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

error:function(){

//失败调用该函数

alert('系统出错');

}

});

</script>

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

<div>

<option value="cayene">卡宴turbo</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>");

}elseif(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();否则就会有多条描述和价格显示在页面。这样就能实现选择下拉列表中的汽车则显示该汽车的描述和价格。如下图：