博主在做项目时，需要做一个根据学期无刷新地址栏获取课程的功能，类似于地区联动选择。如图所示：
1.运行演示
ajax 实际上是 JavaScript+XML 来实现
原始AJax 实际为 XMLHtttpRequest
而Jquery中的ajax 有 ( . p o s t , .post, .post,.get,$.ajax)三种形式
2.ajax能够解析的内容
普通字符串 为特殊字符串
XML文件内容 熟练XML文件结构
JSON字符串 JSON的基本类型
3.设计AJAX的实例
学期表
Term 学期编号 term_id term_name 学期名称
课程表 course course_id 课程编号 course_name 课程名称 所属学期 term_id
博主使用的是get形式实现：
jsp代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@include file="/admin/common.jspf" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>课程列表使用Ajax解析字符实例</title>
</head>
<body>
选择学期:
<select id="sel_term">
<option value="-1">--请选择--</option>
<c:forEach items="${terms}" var="term">
<option value="${term.term_id}">${
term.term_name}</option>
</c:forEach>
</select>
课程：
<select id="sel_course">
<option value="-1">--请选择--</option>
</select>
<script type="text/javascript">
$(function(){
//绑定下拉列表改变的事件
$("#sel_term").bind("change",function(){
var term_id=$(this).val();
var $selcourse=$("#sel_course");
//选择的value值,
//使用jQuery的get函数发送ajax请求
//url为请求的服务器路径，data是发送请求的参数，callback是请求成功后的回调函数,请求的数据类型
//$.get(url,data,callback,dataType);
$.get("${basePath}/TermServlet?action=findCourseById",{
termId:term_id},function(data){
$selcourse.find("option:gt(0)").remove();//清除
var courses=data.split(",");
for(var i=0;i<courses.length;i++){
var course=courses[i].split("_");
//获取课程id与name
var id=course[0];
var name=course[1];
//构建option对象
var $option=$("<option value="+id+">"+name+"</option>");
//把option追加到sel下拉对象中里
$selcourse.append($option);
}
});
});
});
</script>
</body>
</html>
XML方式请求
private void findUserByName(HttpServletRequest request,
HttpServletResponse response) throws IOException {
// TODO Auto-generated method stub
//设置XML文件类型
response.setContentType("text/xml;charset=UTF-8");
PrintWriter out=response.getWriter();
String name=request.getParameter("name");
List<User> users=userservice.findUserByName(name);
//组合方式:课程id_课程名称,课程id_课程名称,...
StringBuffer sbd=new StringBuffer();
sbd.append("<?xml version=\"1.0\" encoding=\"UTF-8\" ?>");
sbd.append("<users>");
System.out.println(users);
if(users!=null&&users.size()>0){
for(User user:users){
sbd.append("<user id=\""+user.getId()+"\" name=\""+user.getName()+"\" />");
}
}
//去掉最后一个逗号
sbd.append("<users>");
System.out.println(sbd);
//响应在页面
out.write(sbd.toString());
out.flush();
out.close();
}