ajax

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