register.jsp代码如下:
<tr>
<td>
<c:forEach var="province" items="${provincelist}">
<!-- 这里的this就代表a标签,获取this,就可以获取到a标签的所有属性,即id和coId -->
<a onclick='setProUnis(this)' href="javascript:void(0);"
class="xh" id="${province.id}" name="${province.country.id }">
${province.name } </a>
</c:forEach>
</td>
</tr>
在a标签上添加了一个onclick事件。
ajax_uni.js代码如下:
//响应用户点击省市
function setProUnis(o) {
createXMLHttpRequest(); //创建AJAX引擎
if (xmlrequest) { //AJAX引擎创建成功,即非空
//准备发送请求,带上省id和国家的id
var req = "/xiaonei/ChangeInfo?proid="+o.id+"&cid="+o.name;
//alert(req);
//打开请求:因为数据量很小,所以选择get请求;req代表的是url
//false是等待有返回数据的时再继续往下走,还没有得到数据的时候就会卡在那里,直到获取数据为止。
//true是不等待,直接返回,这就是所谓的异步获取数据!
xmlrequest.open("get", req, true);
//指定处理结果的函数,即回调函数
xmlrequest.onreadystatechange = getProUnis; //拿到从ChangeInfo Servlet返回的切换省份后的大学数据
//发送请求
xmlrequest.send();
}
}
//根据不同的浏览器创建AJAX引擎
function createXMLHttpRequest() {
if (window.ActiveXObject) { //如果是IE浏览器
xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
} else { //非IE浏览器
xmlrequest = new XMLHttpRequest();
}
}
//回调函数
function getProUnis() {
/*XMLHttpRequest对象的属性:
readyState(对象状态:0 为未初始化;1为读取中;2为已读取;3为交互中;4为完成)
status(服务器返回的状态码,404为文件未找到,200为成功)*/
//完成
if (xmlrequest.readyState == 4) {
//成功返回!
if (xmlrequest.status == 200) {
//表示获取unis集合,并拼接成一个新的大学表格
var unis = xmlrequest.responseXML.getElementsByTagName("unis");
var con = "<table width='100%'><tr>";
for (var i = 1; i <= unis.length; i++) {
con += "<td><li><a onclick='showMyUni(this)' href='javascript:void(0);' id='" + unis[i - 1].childNodes[0].childNodes[0].data + "' class='xh'>" + unis[i - 1].childNodes[1].childNodes[0].data + "</a></li></td>";
if (i % 3 == 0) {
con += "</tr><tr>";
}
}
con += "</tr></table>";
//替换成最新的表格
document.getElementById("uniTbl").innerHTML = con;
}
}
}
创建一个servlet,用来处理setProUnis(o)发送过来的请求。ChangeInfo.java代码如下:
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
//浏览器禁用缓存(使用ajax为什么要禁用缓存?)
//response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
//响应用户选择不同省或直辖市的大学信息请求
String proid = request.getParameter("proid");
String cid = request.getParameter("cid");
System.out.println(proid + "&&" + cid);
//获取spring容器
WebApplicationContext ctx = WebApplicationContextUtils.getWebApplicationContext(this.getServletContext());
//从spring容器中,取出了 UniversityServiceInter 类型的bean
UniversityServiceInter universityService=(UniversityServiceInter) ctx.getBean("universityService");
List<University> uniList=universityService.getResult("from University where province.id=? and country.id=?",
new Object[]{Integer.valueOf(proid),Integer.valueOf(cid)});
String res = "<allUniversities>";
for (int i = 0; i < uniList.size(); i++) {
University u = uniList.get(i);
//XML文档中的所有文本都会被解析器解析,只有CDATA部分的文本会被解析器忽略.引入CDATA后,代码更严谨,防止大学名称中出现特殊的字符而解析错误。
res += "<unis><id>" + u.getId() + "</id><name><![CDATA[" + u.getName() + "]]></name></unis>";
//res += "<unis><id>" + u.getId() + "</id><name>"+ u.getName() + "</name></unis>";
}
res += "</allUniversities>";
System.out.println(res);
out.write(res); //返回给AJAX的回调函数
out.close();
}
然后运行结果一直报xmlrequest.responseXML为空的问题。
自己调试了很久,最后发现,原来是自己粗心,将服务器端的response.setContentType(“text/xml;charset=utf-8”);写成了response.setContentType(“text/html;charset=utf-8”)。