GET方式
GET方式是直接把参数的信息都放在url地址上，所以处理起来会相对简单。
步骤：
- 使用StringBuilder装载着getParameter("url")【获取得到地址，呆会要做拼接，所以用StringBuilder】
- 得到其他参数的时候，做URLEncode.encode()，因为我们进入Servlet的时候已经被decode了一次【我们要尽可能保留原始请求】(参照解决中文乱码)
- 遍历所有的请求参数，只要名字不是"url"，就添加到StringBuilder中【第一个参数为"?",其他的参数为"&"】(http://localhost:8080/url?aa=bb&cc=dd)
- 创建URL对象，把拼接成的StringBuilder传递进去
- 使用BufferReader读取远程服务器返回的数据，要指定输入流编码格式，否则会乱码
BufferedReaderreader=newBufferedReader(newInputStreamReader(URL对象.openSteam(),"UTF-8"));
- 最后，把远程服务器读取到的数据再返回给XMLHttpRequest
POST方式
POST方式把参数的信息都封装到HTTP请求中，在URL进行连接的时候，需要把数据写给远程服务器
步骤：
- 得到url参数，创建StringBuilder
- 得到其他参数的时候，做URLEncode.encode()，因为我们进入Servlet的时候已经被decode了一次【我们要尽可能保留原始请求】(参照解决中文乱码)
- 遍历所有的请求参数，只要名字不是"url"，就添加到StringBuilder中【第一个参数直接给出,其他的参数为"&"】(aa=bb&cc=dd&ee=ff)
- 创建URL对象，创建URL连接器，允许写数据到远程服务器上
URLurl=newURL(url);
URLConnectionconnection=url.openConnection;
connection.setDoOutPut(true);
- 得到写数据流
OutputSteamWriterwriter=newOutputSteamWriter(conncetion.getOutputSteam)
- 把StringBuilder的数据写到远程服务器上，并flush
- 使用BufferReader读取远程服务器返回的数据
BufferedReaderreader= newBufferedReader(newInputSteamReader(conncetion.inputSteamReader,"UTF-8"));
AJAX二级下拉联动案例【XML版】
我们在购物的时候，常常需要我们来选择自己的收货地址，先选择省份，再选择城市...
有没有发现：当我们选择完省份的时候，出现的城市全部都是根据省份来给我们选择的。这是怎么做到的呢？？？其实就是通过AJAX来完成的。使用AJAX技术让我们看起来网页非常“智能”，会根据省份来给出对应的城市信息。
我们这里就不读取数据库了，直接在Servlet写死数据来进行模拟测试。
分析
我们知道AJAX与服务器之间的交互常用的传输载体格式有三种：
- HTML
- XML
- JSON
由于省份与城市是有层级关系的，因此我们只能用XML或者JSON。
我们这里首先就用XML来进行，后面会使用JSON，来看看他俩有什么不同的地方。。
前台分析
当用户选择了某个省份之后，就使用AJAX与服务器进行交互，那么在选择城市的时候就出现对应的城市信息。
- 监听下拉框值变化事件
- 只要下拉框值变化了，就与服务器进行交互
- 得到服务器返回的值，解析XML
- 使用DOM把数据写到城市下拉框列表中
后台分析
- 得到前台带过来的数据
- 判断该数据是什么，返回对应的的XML文件
写JSP页面
<%--
CreatedbyIntelliJIDEA.
User:ozc
Date:2017/5/17
Time:19:38
TochangethistemplateuseFile|Settings|FileTemplates.
--%>
<%@pagecontentType="text/html;charset=UTF-8"language="java"%>
<html>
<head>
<title>多级联动</title>
<scripttype="text/javascript"src="js/ajax.js"></script>
</head>
<body>
<%--############前台页面###################--%>
<selectname="province"id="provinceId">
<optionvalue="-1">请选择省份</option>
<option>广东</option>
<option>湖南</option>
</select>
<selectname="city"id="cityId">
<option>请选择城市</option>
</select>
<%--############AJAX###################--%>
<scripttype="text/javascript">
document.getElementById("provinceId").onchange=function(){
/**********定位到下拉框，获取下拉框的值***************/
// 获取选中的下拉框索引值
varindex=this.selectedIndex;
// 得到下拉框的值
varprovince=this.options[index].innerHTML;
//下拉框的值要是“请选择”，那么我们是不会访问服务器的
if("请选择省份"!=province){
/********由于每次都会自动添加，因此每次在调用的时候清除***********/
varcitySelect=document.getElementById("cityId");
//每次都将option变成长度只有1的
citySelect.options.length=1;
/*************ajax代码*********************/
//创建AJAX对象
varajax=createAJAX();
//准备发送请求
varmethod="post";
varurl="${pageContext.request.contextPath}/ProvinceServlet?time="+newDate().getTime();
ajax.open(method,url);
//由于是POST方式，因此要设置头
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
ajax.send("province="+province);
/************ajax回调函数*********************/
ajax.onreadystatechange=function(){
if(ajax.readyState==4){
if(ajax.status==200){
//得到服务器端带过来的XML
varXMLDocument=ajax.responseXML;
/**********解析XML文档，使用DOM写到下拉框中****************/
varcities=XMLDocument.getElementsByTagName("city");
//得到每一个cities节点的值，动态生成下拉框，添加到下拉框中
for(vari=0;i<cities.length;i++){
varvalue=cities[i].firstChild.nodeValue;
//动态生成下拉框
varoptionElement=document.createElement("option");
optionElement.innerHTML=value;
//添加到下拉框中
citySelect.appendChild(optionElement);
}
}
}
};
}
};
</script>
</body>
</html>
