Ajax 技术练习
一、Ajax 实现下拉菜单
1.1 场景再现
我们在购买快递选择收获地址的时候，选择地域一般都是现选择省，省选择完毕后，电脑会自动显示该省对应的城市，我们选择了城市之后，系统会显示该城市所对应的的区域。
其实这就是通过 ajax 后台数据自动生成的，接下来我们就来实现一下
我们这里使用 servlet 写死数据
1.2 技术分析
1.2.1 前台分析
我们设置一个监听事件给第一个下拉选择框，当用户选择了一个省份之后，就使用 ajax 进行交互，得到对应的城市的信息。整理一下
- 监听下拉框的变化事件
- 下拉框的值发生变化之后，就与服务端进行交互
- 服务端收到数据，根据用户传过来的省份进行信息匹配，然后把数据返回给用户
- 数据返回给前端之后，使用 dom 把数据写进城市下拉列表当中
1.2.2 后台分析
后端使用 servlet 把数据写死
- 后端监听前端发过来的数据
- 判断数据类型，然后经过处理，数据重新封装，返还给前端
二、让我们来实现它
2.1 前端界面 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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax 实现下拉联动</title>
</head>
<body>
<!-- ######################## 前端界面 ############################## -->
<p>省份的选择界面</p>
<select name="province" id="provinceId">
<option value="-1">请选择省份</option>
<option>湖北省</option>
<option>湖南省</option>
</select>
<select name="city" id="cityId">
<option>请选择城市</option>
</select>
<script type="text/javascript">
</script>
</body>
</html>
2.2 ajax 代码
document.getElementById("provinceId").onchange = function() {
var index = this.selectedIndex; // 获取选项中下标的索引值
var province = this.options[index].innerHTML;// 获取下拉框的值
// 下拉框的值合格性验证
if (index != this.options[0]) {
// 选择城市列表的时候，会自动添加，因此调用时就清除
var citySelect = document.getElementById("cityId");
// 每次长度都变为 1
citySelect.options.length = 1;
// 定义请求的地址,我依然使用 post 请求
var url = "AjaxServlet_xml?time" + new Date().getTime();
// ajax 代码
var xmlhttp;
// 根据不停的版本的游览器，使用不同的 ajax 的 api
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE6 以下版本
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 绑定事件
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
// var text = xmlhttp.responseText;
var text = xmlhttp.responseXML;
console.log(text);
// 将返回的 xml 数据进行解析操作,写入城市下拉框中
var cities = text.getElementsByTagName("city");
console.log(cities.length);
//得到每一个cities节点的值，动态生成下拉框，添加到下拉框中
for (var i = 0; i < cities.length; i++) {
var value = cities[i].firstChild.nodeValue;
//动态生成下拉框
var optionElement = document.createElement("option");
optionElement.innerHTML = value;
//添加到下拉框中
citySelect.appendChild(optionElement);
}
}
}
}
// 创建 http 请求，建立与服务器的连接
xmlhttp.open("post", url, true); // 这里的 url 由我们从外面传进来，是 AjaxCheck (一个Servlet)
// 我们采用的 post 请求，因此需要加上请求头
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("province="+province);
}
}
2.2 使用 xml 传输数据 （servlet 代码）
我采用 post 的方式传送数据
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String province = request.getParameter("province"); // 得到前台传递过来的省份
System.out.println(province);
//这里是返回的是XML，因此指定XML数据！
response.setContentType("text/xml;charset=UTF-8");
PrintWriter out = response.getWriter();
/****************返回XML文件给前台**************/
out.write("<?xml version='1.0' encoding='UTF-8'?>");
out.write("<root>");
if("湖北省".equals(province)){
out.write("<city>武汉市</city>");
out.write("<city>黄冈市</city>");
out.write("<city>十堰市</city>");
out.write("<city>襄阳市</city>");
out.write("<city>孝感市</city>");
out.write("<city>随州市</city>");
out.write("<city>神农架</city>");
}else if("湖南省".equals(province)){
out.write("<city>长沙</city>");
out.write("<city>株洲</city>");
out.write("<city>湘潭</city>");
out.write("<city>岳阳</city>");
}
out.write("</root>");
System.out.println("后台返回数据中。。。。");
/*******关闭输出流*******/
out.flush();
out.close();
}
三、运行截图
