jQuery 对 ajax 的支持
1) $.ajax(options):发送Ajax请求
options 是一个形如{key1:value1,key2:value2...}的 js 对象，用于指定发送请求的选项。
选项参数如下：
url(string): 请求地址
type(string): GET/POST
data(object/string): 发送到服务器的参数
dataType(string): 预期服务器返回的数据类型，一般有：
json: 返回 json 字符串
xml: 返回 xml 文档
html: 返回的是一个 html 内容
script: 返回的是一个 javascript 脚本
text: 返回的是一个文本
回调凼数 success(function):请求成功后调用的回调凼数，有两个参数：function(data , textStatus)
data： 服务器返回的数据
textStatus： 描述状态的字符串
回调凼数 error(function):请求失败时调用的凼数，有三个参数 function(xhr , textStatus , errorThrown)
textStatus 不 errorThrown 这两个参数只有一个可用（一般很少用）
2) $.get(url,[data],[callback],[type]) ：发送 get 请求
url: 请求地址
data: 请求参数，可以是一个 js 对象{"name":"zs","age":22}，也可以是一个请求字符串 "name=zs&age=22"。
callback: 回调凼数，callback 格式 function(data,statusText){}
type: 预期服务器返回的数据类型
3) $.post()格式同上：发送 post 请求
4) load(url)：将服务器响应插入当前 jQuery 对象匹配的 dom 元素之内
var $obj = $(选择器);
$obj.load(url);
5) serialize()：为了方便地向服务器传递参数，可以使用 serialize()
serialize(): 将 jQuery 对象包含的表单或 s 表单域转换成查询字符串
serializeArray(): 转换为一个数组，每个数组元素形如 {name:fieldName,value:fieldVal}的对象。
--------------------------前端页面-----------------------------------------------------------------------------------
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<style>
#d1{
width:300px;
height:80px;
background-color:#fff8dc;
display:none;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript">
演示： jQuery的Ajax请求
$(function(){---初始化函数
$('select').change(function(){---select元素绑定change事件
$('#d1').remove();---当change函数执行时将之前显示的东西清空
$.ajax({ ---ajax对象(括号里形如{key1:value1,key2:value2...}的 js 对象)
'url': 'carinfo.do',
'type': 'post',
'data': {'name':$('#s1').val()}, ---向后端发送的数据
'data': $('#s1').serialize(), 生成字符串形如name=bmw520
'data': $('#s1').serializeArray(),等价于 'data': {'name':$('#s1').val()},前者自动组装后者手动组装
'dataType': 'json', 'xml',
'success': function(data,statusText){ 接收后端正确数据data已经被转换成了js对象
$('#s1').after("<div id='d1'></div>");在id为s1的<select>元素后增加一个<div>
$('#d1').html('报价:'+ data.price + '<br/>' + ' 描述:' + data.desc);补充DIV元素内容
$('#d1').slideDown('slow'); 设置该<div>动画效果
setTimeout(function(){ $('#d1').slideUp('slow');},1000);
返回XML文本：data是一个dom节点，指向xml文档对应的那棵dom树
var $obj = $(data);
$('#s1').after("<div id='d1'></div>");
$('#d1').html('报价:'+ $obj.find('price').text()+ '<br/> 描述:' + $obj.find('desc').text());
},
'error': function(xhr,e1,e2){接收后端正确数据xhr：XmlHttpRequest对象e1,e2 ：具体的错误信息
alert('系统错误');
}
});
});
});
演示： jQuery的get请求/post请求
$(function(){
$('#s1').change(function(){
$.get(
'carinfo.do',
{'name':$('#s1').val()},
function(data,desc){---data已经转换成了js对象
$('#s1').after("<div id='d1'></div>");
$('#d1').html('报价:'+ data.price + '<br/>' + ' 描述:' + data.desc);
$('#d1').slideDown('slow');
setTimeout(function(){$('#d1').slideUp('slow');},1000);
},
'json'
);
});
});
演示：load 方法（类似一条数据，点击后调用load方法在该数据下显示其明细）
后端代码略：和其他的响应头html格式一样获取前端数据，处理，打印输出
$(function(){
$('a').toggle(
function(){
var airline = $(this).text();
$(this).next().load('airline.do',{'airline':airline});
},
function(){
$(this).next().empty();
}
);
});
</script>
</head>
<body style="font-size:30px;">
<select style="width:120px;" id="s1" name="name">
<option value="bmw520">宝马520</option>
<option value="qqme">QQme</option>
<option value="maiten">迈腾</option>
</select>
<table border="1" cellpadding="0" cellspacing="0" width="50%">
<tr><td>序号</td><td>航班号</td></tr>
<tr>
<td>1</td>
<td> <a href="javascript:;">ca1008</a> <div></div> </td>
</tr>
<tr>
<td>2</td>
<td> <a href="javascript:;">mu2008</a> <div></div> </td>
</tr>
</table>
</body>
</html>
--------------------------------------后端代码----------------------------------------------------------------
servlet后端：
导入 JSON 的 Jar 包：
public class ActionServlet extends HttpServlet {
public void service(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
String uri =request.getRequestURI();
String path = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
if(path.equals("/carinfo")){
PrintWriter out = response.getWriter();
String name =request.getParameter("name");---获取页面传递参数的值
System. out .println(name);
response.setContentType("text/html;charset=utf-8");---返回JSON数据的字符串形式的响应格式
response.setContentType("text/xml;charset=utf-8");---返回XML文档字符串的响应格式
StringBuffer sb = new StringBuffer();
sb.append("<msg>");
if(name.equals("bmw520")){
Car car = new Car("bmw520",50,"还行");
JSONObject obj = JSONObject. fromObject (car);---java对象转换为JSON对象
out.println(obj.toString());---输出JSON字符串形式数据到页面Ajax对象
sb.append("<price>50</price>");
sb.append("<desc>还丌错</desc>");
}else if(name.equals("qqme")){
Car car = new Car("qqme",5,"真丌错");
JSONObject obj = JSONObject. fromObject (car);
out.println(obj.toString());
sb.append("<price>5</price>");
sb.append("<desc>非常丌错</desc>");
}else{
Car car = new Car("maiten",18,"高性能商务车");
JSONObject obj = JSONObject. fromObject (car);
out.println(obj.toString());
sb.append("<price>18</price>");
sb.append("<desc>没开过丌知道</desc>");
}
sb.append("</msg>");
out.println(sb.toString()); ---输出XML文档字符串形式数据
out.close();
}
}
}