JavaWeb笔记-23-ajax请求案例---省市联动
省市联动
1. 页面
2. ProvinceServlet:
当页面加载完毕后马上请求ProvinceServlet！
1）加载china.xml文件，把所有的省的名称使用字符串发送给客户端！
3. 页面的工作-1
将省份省份添加到ssld.jsp
//此jsp页面工作：
1）从provinceServlet中得到省份，显示在第一个下拉选择框中
2）当第一个选择框选择改变时，请求CityServlet，得到对应省份，显示在第二个下拉选择框中。
<script type="text/javascript">
/*
1. a> 在文档加载完毕时发送请求，
b> 使用ajax请求ProvinceServlet，得到所有省份名称。
c> 显示在中
*/
//得到XMLHttpRequest
//依次使用三种得到（XMLHttpRequest）方式
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();
} catch(e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
alert("哥们儿，你用的是什么浏览器啊？");
throw e;
}
}
}
}
window.onload = function(){
//1.得到XMLHttp //2.打开连接 //3.发送请求 //4.注册监听器
var XMLHttp = createXMLHttpRequest();
XMLHttp.open("GET","//创建元素
var option = document.createElement("option");
//为option设置 value（实际值） 和text（显示值）
option.value = arr[i]; //实际值
option.appendChild(document.createTextNode(arr[i])); //显示值 将文本节点添加到option中
//将option添加到select中
document.getElementById("pro").appendChild(option);
}
}
};
/*
2. a>在选择了新的省份时，发送请求（参数为省名称），得到xml文档
b>解析xml文档，得到其中所有的
c>再得到每个元素的内容，即市名，
d>使用市名生成
//给
var proSelect = document.getElementById("pro") //先得到id=pro的元素
proSelect.onchange = function(){ //注册改变监听
//ajax四步请求
var XMLHttp = createXMLHttpRequest();
XMLHttp.open("POST", "集合
var cityEleList = doc.getElementsByTagName("city");
for(var i = 0; i < cityEleList.length; i++){
//得到集合中每个city
var cityEle = cityEleList[i];
var cityName;
//获取元素内容(cityName)，处理浏览器差异
if(window.addEventListener){
cityName = cityEle.textContent;
} else{
cityName = cityEle.text;
}
//用city创建option，添加到
var option = document.createElement("option");
option.value = cityName;
// 创建文本节点
option.appendChild(document.createTextNode(cityName));//把文本节点追加到op元素中
//把option添加到
citySelect.appendChild(option);
}
}
};
};
};
script>
head>
<body>
<h1>省市联动h1>
<select name="province" id="pro">
<option>===请选择省份===option>
select>
<select name="city" id = "c">
<option>===请选择城市===option>
select>
body>ProvinceServlet
@WebServlet("/ProvinceServlet")
public class ProvinceServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
//加载china.xml文件，把所有的省的名称使用字符串发送给客户端
//使用dom4j操作xml文件
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
try {
// 1）创建解析器
SAXReader saxReader = new SAXReader();
InputStream input = this.getClass().getResourceAsStream("/china.xml");
// 2）调用解析器读方法，得到document
Document document = saxReader.read(input);
/*
* 查询所有province的name属性，得到属性对象 （使用xpath表达式进行查询）
*
* 循环遍历，把所有的属性值连接成一个字符串，发送给客户端
*/
List arrList = document.selectNodes("//province/@name");
//使用StringBuilder存储由属性值构成的字符串。StringBuilder是一个可变的字符序列。
StringBuilder sb = new StringBuilder();
for (int i = 0; i < arrList.size(); i++) {
sb.append(((Attribute) arrList.get(i)).getValue());
if(i < arrList.size() - 1){
sb.append(",");
}
}
//response向客户端输出内容
response.getWriter().print(sb);
} catch(Exception e) {
throw new RuntimeException(e);
}
}
}
CityServlet
@WebServlet("/CityServlet")
public class CityServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/*
* 获取省份名称，加载该省对应的元素！
* 把元素转换成字符串发送给客户端
*/
/*
* 1. 获取省份的名称
* 2. 使用省份名称查找到对应的元素
* 3. 把元素转换成字符串，发送！
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
//设置text/xml
response.setContentType("text/xml;charset=utf-8");
//得到省份名称
String pname = request.getParameter("pname");
try{
//得到解析器,得到资源流，得到document
SAXReader saxReader = new SAXReader();
InputStream input = this.getClass().getResourceAsStream("/china.xml");
Document document = saxReader.read(input);
//得到name属性为pname的元素
Element proEle = (Element) document.selectSingleNode("//province[@name='" + pname + "']");
//把proEle元素转换为字符串
String proStr = proEle.asXML();
//将字符串发送给客户端
response.getWriter().print(proStr);
}catch(Exception e){
throw new RuntimeException(e);
}
}
}