asynchronous javascript and xml:异步的js和xml。使用js访问服务器,而且是异步访问!
一般的,服务器给客户端的响应是整个页面!但在Ajax中,服务器响应的只是数据(text、xml、json)。
同步交互:发送一个请求后,等待服务器响应结束;然后才能发送第二个请求!刷新的是整个页面!
异步交互:发送一个请求后,无需等待服务器响应结束,就可以发送第二个请求!
异步交互增强了用户的体验,无需响应整个页面,但是增多了对服务器的访问次数!
Ajax发送异步请求的步骤
(1)创建XMLHttpRequest
大多数浏览器都支持:var xmlHttp = new XMLHttpRequest();
IE6.0:var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
IE5.5以更早版本的IE:var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
function createXMLHttpRequest(){ try{ return new XMLHttpRequest(); }catch(e){ try{ return new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ return new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ throw e; } } } }
(2)与服务器建立连接
xmlHttpRequest.open(arg1, arg2, arg3)
> 请求方式:GET或POST
> 请求URL:服务器端资源路径
> 是否为异步请求:true 或 false
(3)发送请求
【如果是GET方式】
xmlHttpRequest.send(null);// GET方式不能设置请求体,即使设置了,也发不出去。为了兼容,请求体设为null。
【如果是POST方式】
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-urlencoded");
xmlHttpRequest.send("name1=value1&name2=value2");// POST方式可以设置请求体。
(4)注册状态监听器
xmlHttpRequest一共有5个状态:
> 0状态:刚创建;
> 1状态:调用open()方法;
> 2状态:调用send()方法;
> 3状态:服务器开始响应
> 4状态:服务器响应结束!!!(通常我们只关心这个状态)
* 得到xmlHttpRequest对象的状态:
> var state = xmlHttpRequest.readyState; // 可能是0、1、2、3、4
* 得到服务器响应的状态码:
> var status = xmlHttpRequest.status; // 可能是200、404、500
* 得到服务器响应的内容:
> var content = xmlHttp.responseText; // 得到服务器响应的文本内容,返回字符串
> var content = xmlHttp.responseXML; // 得到服务器响应的xml内容,返回Document对象
例如:
xmlHttp.onreadystatechange = function() { // xmlHttpRequest的5种状态都会调用此方法
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
var text = xmlHttp.responseText;
}
};
案例1 --GET请求
点击按钮,给<h1>添加文本内容,文本内容是AServlet的响应输出
AServlet.java
package zh.servlet.demo; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class AServlet extends HttpServlet { private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 解决响应中文乱码问题 response.setContentType("text/html;charset=utf-8"); response.getWriter().print("嗨!你好啊!Ajax"); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!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> <script type="text/javascript"> // 创建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) { throw e; } } } } // 页面加载完后执行 window.onload = function() { // 为按钮添加事件 var button = document.getElementById("button"); button.onclick = function() { // 创建xmlHttpRequest对象 var xmlHttpRequest = createXMLHttpRequest(); // 域服务器建立连接 //xmlHttpRequest.open("GET", "<c:url value='/AServlet'></c:url>", true);// ok xmlHttpRequest.open("GET", "${pageContext.request.contextPath}/AServlet", true);// ok // 发送异步请求 xmlHttpRequest.send(null); // 注册状态监听器 xmlHttpRequest.onreadystatechange = function() { if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) { // 得到响应内容 var content = xmlHttpRequest.responseText;//没有括号 // 给<h1>添加文本内容 var h1 = document.getElementById("h1"); h1.innerHTML = content; } }; }; }; </script> </head> <body> <h1 id="h1" style="color:orange;"></h1> <input type="button" value="给<h1>添加文本" id="button"> </body> </html>
演示:
点击按钮
案例2 --POST请求
校验用户名是否被注册
BServlet.java
package zh.servlet.demo; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class BServlet extends HttpServlet { private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 解决POST提交中文乱码问题 request.setCharacterEncoding("utf-8"); // 解决响中文乱码问题 response.setContentType("text/html;charset=utf-8"); String username = request.getParameter("username"); // 如果usernmae为root,就说此usernmae已经被注册,返回0 if (username.equalsIgnoreCase("root")) { response.getWriter().print(0); } else { response.getWriter().print(1); } } }
2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!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> <script type="text/javascript"> // 创建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) { throw e; } } } } // 页面加载完后执行 window.onload = function() { var username = document.getElementById("username"); // 失去焦点事件 username.onblur = function() { // 获取用户名 var value = username.value; // 创建xmlHttpRequest对象 var xmlHttpRequest = createXMLHttpRequest(); // 与服务器建立连接 xmlHttpRequest.open("POST", "${pageContext.request.contextPath}/BServlet", true); // 发送POST请求,首先要设置Content-Type xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttpRequest.send("username=" + value);// POST方式可以带参数,GET方式不行 // 注册状态监听事件 xmlHttpRequest.onreadystatechange = function() { if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) { // 获取响应文本 var content = xmlHttpRequest.responseText;//没有括号 // 显示用户名是否被注册 var span = document.getElementById("span"); if (content == 0) {// 响应为0,说明用户名已经注册 span.innerHTML = "此用户名已经被注册,请您更换用户名"; } else { span.innerHTML = ""; } } }; }; }; </script> </head> <body> 用户名: <input type="text" id="username"> <span id="span"></span> </body> </html>
演示:
【注意】:案例1和案例2,服务器返回的数据类型都是Text,Ajax中使用xmlHttpRequest.responseText接收,得到字符串。
案例3 --省市联动
【注意】:案例3中,服务器返回的数据类型是XML,因此需要设置response.setContentType("text/xml;charset=utf-8");Ajax中使用xmlHttpRequest.responseXML接收,得到Document对象。
china.xml
<?xml version="1.0" encoding="UTF-8"?> <china> <province name="北京"> <city>东城区</city> <city>西城区</city> <city>崇文区</city> <city>宣武区</city> <city>朝阳区</city> <city>丰台区</city> <city>石景山区</city> <city>海淀区</city> <city>门头沟区</city> <city>房山区</city> <city>通州区</city> <city>顺义区</city> <city>昌平区</city> <city>大兴区</city> <city>怀柔区</city> <city>平谷区</city> <city>密云县</city> <city>延庆县</city> </province> <province name="天津"> <city>和平区</city> <city>河东区</city> <city>河西区</city> <city>南开区</city> <city>河北区</city> <city>红桥区</city> <city>塘沽区</city> <city>汉沽区</city> <city>大港区</city> <city>东丽区</city> <city>西青区</city> <city>津南区</city> <city>北辰区</city> <city>武清区</city> <city>宝坻区</city> <city>宁河县</city> <city>静海县</city> <city>蓟县</city> </province> <province name="河北"> <city>石家庄</city> <city>唐山</city> <city>秦皇岛</city> <city>邯郸</city> <city>邢台</city> <city>保定</city> <city>张家口</city> <city>承德</city> <city>沧州</city> <city>廊坊</city> <city>衡水</city> </province> <province name="山西"> <city>太原</city> <city>大同</city> <city>阳泉</city> <city>长治</city> <city>晋城</city> <city>朔州</city> <city>晋中</city> <city>运城</city> <city>忻州</city> <city>临汾</city> <city>吕梁</city> </province> <province name="内蒙古"> <city>呼和浩特</city> <city>包头</city> <city>乌海</city> <city>赤峰</city> <city>通辽</city> <city>鄂尔多斯</city> <city>呼伦贝尔</city> <city>巴彦淖尔</city> <city>乌兰察布</city> <city>兴安盟</city> <city>锡林郭勒盟</city> <city>阿拉善盟</city> </province> <province name="辽宁"> <city>沈阳</city> <city>大连</city> <city>鞍山</city> <city>抚顺</city> <city>本溪</city> <city>丹东</city> <city>锦州</city> <city>营口</city> <city>阜新</city> <city>辽阳</city> <city>盘锦</city> <city>铁岭</city> <city>朝阳</city> <city>葫芦岛</city> </province> <province name="吉林"> <city>长春</city> <city>吉林</city> <city>四平</city> <city>辽源</city> <city>通化</city> <city>白山</city> <city>松原</city> <city>白城</city> <city>延边</city> </province> <province name="黑龙江"> <city>哈尔滨</city> <city>齐齐哈尔</city> <city>鸡西</city> <city>鹤岗</city> <city>双鸭山</city> <city>大庆</city> <city>伊春</city> <city>佳木斯</city> <city>七台河</city> <city>牡丹江</city> <city>黑河</city> <city>绥化</city> <city>大兴安岭</city> </province> <province name="上海"> <city>黄浦区</city> <city>卢湾区</city> <city>徐汇区</city> <city>长宁区</city> <city>静安区</city> <city>普陀区</city> <city>闸北区</city> <city>虹口区</city> <city>杨浦区</city> <city>闵行区</city> <city>宝山区</city> <city>嘉定区</city> <city>浦东新区</city> <city>金山区</city> <city>松江区</city> <city>青浦区</city> <city>南汇区</city> <city>奉贤区</city> <city>崇明县</city> </province> <province name="江苏"> <city>南京</city> <city>无锡</city> <city>徐州</city> <city>常州</city> <city>苏州</city> <city>南通</city> <city>连云港</city> <city>淮安</city> <city>盐城</city> <city>扬州</city> <city>镇江</city> <city>泰州</city> <city>宿迁</city> </province> <province name="浙江"> <city>杭州</city> <city>宁波</city> <city>温州</city> <city>嘉兴</city> <city>湖州</city> <city>绍兴</city> <city>金华</city> <city>衢州</city> <city>舟山</city> <city>台州</city> <city>丽水</city> </province> <province name="安徽"> <city>合肥</city> <city>芜湖</city> <city>蚌埠</city> <city>淮南</city> <city>马鞍山</city> <city>淮北</city> <city>铜陵</city> <city>安庆</city> <city>黄山</city> <city>滁州</city> <city>阜阳</city> <city>宿州</city> <city>巢湖</city> <city>六安</city> <city>亳州</city> <city>池州</city> <city>宣城</city> </province> <province name="福建"> <city>福州</city> <city>厦门</city> <city>莆田</city> <city>三明</city> <city>泉州</city> <city>漳州</city> <city>南平</city> <city>龙岩</city> <city>宁德</city> </province> <province name="江西"> <city>南昌</city> <city>景德镇</city> <city>萍乡</city> <city>九江</city> <city>新余</city> <city>鹰潭</city> <city>赣州</city> <city>吉安</city> <city>宜春</city> <city>抚州</city> <city>上饶</city> </province> <province name="山东"> <city>济南</city> <city>青岛</city> <city>淄博</city> <city>枣庄</city> <city>东营</city> <city>烟台</city> <city>潍坊</city> <city>济宁</city> <city>泰安</city> <city>威海</city> <city>日照</city> <city>莱芜</city> <city>临沂</city> <city>德州</city> <city>聊城</city> <city>滨州</city> <city>荷泽</city> </province> <province name="河南"> <city>郑州</city> <city>开封</city> <city>洛阳</city> <city>平顶山</city> <city>安阳</city> <city>鹤壁</city> <city>新乡</city> <city>焦作</city> <city>濮阳</city> <city>许昌</city> <city>漯河</city> <city>三门峡</city> <city>南阳</city> <city>商丘</city> <city>信阳</city> <city>周口</city> <city>驻马店</city> </province> <province name="湖北"> <city>武汉</city> <city>黄石</city> <city>十堰</city> <city>宜昌</city> <city>襄樊</city> <city>鄂州</city> <city>荆门</city> <city>孝感</city> <city>荆州</city> <city>黄冈</city> <city>咸宁</city> <city>随州</city> <city>恩施</city> <city>神农架</city> </province> <province name="湖南"> <city>长沙</city> <city>株洲</city> <city>湘潭</city> <city>衡阳</city> <city>邵阳</city> <city>岳阳</city> <city>常德</city> <city>张家界</city> <city>益阳</city> <city>郴州</city> <city>永州</city> <city>怀化</city> <city>娄底</city> <city>湘西</city> </province> <province name="广东"> <city>广州</city> <city>韶关</city> <city>深圳</city> <city>珠海</city> <city>汕头</city> <city>佛山</city> <city>江门</city> <city>湛江</city> <city>茂名</city> <city>肇庆</city> <city>惠州</city> <city>梅州</city> <city>汕尾</city> <city>河源</city> <city>阳江</city> <city>清远</city> <city>东莞</city> <city>中山</city> <city>潮州</city> <city>揭阳</city> <city>云浮</city> </province> <province name="广西"> <city>南宁</city> <city>柳州</city> <city>桂林</city> <city>梧州</city> <city>北海</city> <city>防城港</city> <city>钦州</city> <city>贵港</city> <city>玉林</city> <city>百色</city> <city>贺州</city> <city>河池</city> <city>来宾</city> <city>崇左</city> </province> <province name="海南"> <city>海口</city> <city>三亚</city> </province> <province name="重庆"> <city>重庆</city> <city>万州区</city> <city>涪陵区</city> <city>渝中区</city> <city>大渡口区</city> <city>江北区</city> <city>沙坪坝区</city> <city>九龙坡区</city> <city>南岸区</city> <city>北碚区</city> <city>万盛区</city> <city>双桥区</city> <city>渝北区</city> <city>巴南区</city> <city>黔江区</city> <city>长寿区</city> <city>綦江县</city> <city>潼南县</city> <city>铜梁县</city> <city>大足县</city> <city>荣昌县</city> <city>璧山县</city> <city>梁平县</city> <city>城口县</city> <city>丰都县</city> <city>垫江县</city> <city>武隆县</city> <city>忠县</city> <city>开县</city> <city>云阳县</city> <city>奉节县</city> <city>巫山县</city> <city>巫溪县</city> <city>石柱土家族自治县</city> <city>秀山土家族苗族自治县</city> <city>酉阳土家族苗族自治县</city> <city>彭水苗族土家族自治县</city> <city>江津</city> <city>合川</city> <city>永川</city> <city>南川</city> </province> <province name="四川"> <city>成都</city> <city>自贡</city> <city>攀枝花</city> <city>泸州</city> <city>德阳</city> <city>绵阳</city> <city>广元</city> <city>遂宁</city> <city>内江</city> <city>乐山</city> <city>南充</city> <city>眉山</city> <city>宜宾</city> <city>广安</city> <city>达州</city> <city>雅安</city> <city>巴中</city> <city>资阳</city> <city>阿坝</city> <city>甘孜</city> <city>凉山</city> </province> <province name="贵州"> <city>贵阳</city> <city>六盘水</city> <city>遵义</city> <city>安顺</city> <city>铜仁</city> <city>黔西南</city> <city>毕节</city> <city>黔东南</city> <city>黔南</city> </province> <province name="云南"> <city>昆明</city> <city>曲靖</city> <city>玉溪</city> <city>保山</city> <city>昭通</city> <city>丽江</city> <city>思茅</city> <city>临沧</city> <city>楚雄</city> <city>红河</city> <city>文山</city> <city>西双版纳</city> <city>大理</city> <city>德宏</city> <city>怒江</city> <city>迪庆</city> </province> <province name="西藏"> <city>拉萨</city> <city>昌都</city> <city>山南</city> <city>日喀则</city> <city>那曲</city> <city>阿里</city> <city>林芝</city> </province> <province name="陕西"> <city>西安</city> <city>铜川</city> <city>宝鸡</city> <city>咸阳</city> <city>渭南</city> <city>延安</city> <city>汉中</city> <city>榆林</city> <city>安康</city> <city>商洛</city> </province> <province name="甘肃"> <city>兰州</city> <city>嘉峪关</city> <city>金昌</city> <city>白银</city> <city>天水</city> <city>武威</city> <city>张掖</city> <city>平凉</city> <city>酒泉</city> <city>庆阳</city> <city>定西</city> <city>陇南</city> <city>临夏</city> <city>甘南</city> </province> <province name="青海"> <city>西宁</city> <city>海东</city> <city>海北</city> <city>黄南</city> <city>海南</city> <city>果洛</city> <city>玉树</city> <city>海西</city> </province> <province name="宁夏"> <city>银川</city> <city>石嘴山</city> <city>吴忠</city> <city>固原</city> <city>中卫</city> </province> <province name="新疆"> <city>乌鲁木齐</city> <city>克拉玛依</city> <city>吐鲁番</city> <city>哈密</city> <city>昌吉</city> <city>博尔塔拉</city> <city>巴音郭楞</city> <city>阿克苏</city> <city>克孜勒苏</city> <city>喀什</city> <city>和田</city> <city>伊犁</city> <city>塔城</city> <city>阿勒泰</city> <city>石河子</city> <city>阿拉尔</city> <city>图木舒克</city> <city>五家渠</city> </province> <province name="香港"> <city>香港</city> </province> <province name="澳门"> <city>澳门</city> </province> <province name="台湾"> <city>台湾</city> </province> </china>
ProvinceServlet.java
package zh.servlet.demo; import java.io.IOException; import java.io.InputStream; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.dom4j.Attribute; import org.dom4j.Document; import org.dom4j.DocumentException; import org.dom4j.io.SAXReader; public class ProvinceServlet extends HttpServlet { private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 解决响应中文乱码问题 response.setContentType("text/html;charset=utf-8"); // 得到XMl资源流 InputStream xmlInputStream = this.getClass().getClassLoader().getResourceAsStream("china.xml"); // dom4j解析XML SAXReader saxReader = new SAXReader(); Document document = null; try { document = saxReader.read(xmlInputStream); } catch (DocumentException e) { e.printStackTrace(); } // xpath查询,得到属性节点 List<Attribute> provinceNames = document.selectNodes("//province/@name"); StringBuilder content = new StringBuilder(); for(int i = 0;i<provinceNames.size();i++){ content.append(provinceNames.get(i).getText()); if(i<provinceNames.size()-1){ content.append(","); } } // 响应为:省1,省2,...,省n response.getWriter().print(content.toString()); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
CityServlet.java
package zh.servlet.demo; import java.io.IOException; import java.io.InputStream; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.dom4j.Document; import org.dom4j.DocumentException; import org.dom4j.Element; import org.dom4j.io.SAXReader; public class CityServlet extends HttpServlet { private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 解决响应中文乱码问题 response.setContentType("text/xml;charset=utf-8");// 响应文本格式改为xml // 解决POST请求中文乱码问题 request.setCharacterEncoding("utf-8"); String selectedProvince = request.getParameter("selectedProvince"); // 得到XMl资源流 InputStream xmlInputStream = this.getClass().getClassLoader().getResourceAsStream("china.xml"); // dom4j解析XML SAXReader saxReader = new SAXReader(); Document document = null; try { document = saxReader.read(xmlInputStream); } catch (DocumentException e) { e.printStackTrace(); } // xpath查询,得到selectedProvince标签 Element province= (Element) document.selectSingleNode("//province[@name='"+selectedProvince+"']"); // 将标签及其内容转化为xml字符串 String xmlString = province.asXML(); response.getWriter().print(xmlString); } }
city.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>省市联动</title> <script type="text/javascript"> /* 创建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) { throw e; } } } } /* 页面加载完后执行 */ window.onload = function(){ // 首先自动显示省份框中所有省份 var province = document.getElementById("province");// 省份框 var xmlHttpRequest = createXMLHttpRequest(); xmlHttpRequest.open("GET","${pageContext.request.contextPath}/ProvinceServlet",true); xmlHttpRequest.send(null); xmlHttpRequest.onreadystatechange = function(){ if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ // 获取服务端响应的Text:省1,省2,...,省n var textContent = xmlHttpRequest.responseText; // 切分为数组 var provinceArray = textContent.split(","); for(var i=0;i<provinceArray.length;i++){ // 创建<option value="省">省</option> var option = document.createElement("option");// 创建<option> option.value = provinceArray[i];// <option>设置value属性 var textNode = document.createTextNode(provinceArray[i]);// 创建文本节点 option.appendChild(textNode);// <option>设置文本节点 province.appendChild(option);// 添加<option> } } }; var city = document.getElementById("city");// 城市框 // 点击省份后,城市框显示对应的所有城市 province.onchange = function(){ // 首先清空城市框中的城市,除了"--请选择城市--" var cityArray = city.getElementsByTagName("option"); while(cityArray.length>1){ city.removeChild(cityArray[1]); } var selectedProvince = province.value;// 选择的省份 var xmlHttpRequest = createXMLHttpRequest(); xmlHttpRequest.open("POST","${pageContext.request.contextPath}/CityServlet",true); //POST方式必须设置Content-Type xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttpRequest.send("selectedProvince=" + selectedProvince);// 设置请求参数 xmlHttpRequest.onreadystatechange = function(){ if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ var xmlDocument = xmlHttpRequest.responseXML;// 得到Document对象 var cityArray = xmlDocument.getElementsByTagName("city");// 得到数组<city>东城区</city> for(var i = 0; i < cityArray.length; i++){ var cityName;// 得到<city>东城区</city>中的文本内容 if(window.addEventListener) {//处理浏览器的差异 cityName = cityArray[i].textContent;//FireFox等浏览器 } else { cityName = cityArray[i].text;//IE } var option = document.createElement("option");// 创建<option> option.value=cityName;// <option>设置value属性 var textNode = document.createTextNode(cityName);// 创建文本节点 option.appendChild(textNode);// <option>添加文本节点 city.appendChild(option); } } }; }; }; </script> </head> <body> 省份: <select name="province" id="province"> <option selected="selected">--请选择省--</option> </select> 城市: <select name="city" id="city"> <option selected="selected">--请选择市--</option> </select> </body> </html>
访问:http://localhost:8080/JavaWeb1/jsp/city.jsp
city.jsp页面加载完后,省份框中会存在各个省份的选项,如下:
选择某个省份后,城市框中会存在对应的城市,如下:
案例4 -- 服务器返回JSON字符串
Ajax使用:var jsonObject = eval("("+jsonString+")");// 得到JSON对象
Person.java
package zh.servlet.demo; public class Person { private String name; private char sex; private int age; public Person(){ } public Person(String name, char sex, int age) { super(); this.name = name; this.sex = sex; this.age = age; } public String getName() { return name; } public void setName(String name) { this.name = name; } public char getSex() { return sex; } public void setSex(char sex) { this.sex = sex; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } @Override public String toString() { return "Person [name=" + name + ", sex=" + sex + ", age=" + age + "]"; } }
AServlet.java
package zh.servlet.demo; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONObject; public class AServlet extends HttpServlet { private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); /* * JSONObject是一个Map */ // JSONObject jsonObject1 = new JSONObject(); // jsonObject1.put("name", "小仙女"); // jsonObject1.put("sex", '女'); // jsonObject1.put("age", 21); // String jsonString1 = jsonObject1.toString(); // response.getWriter().println(jsonString1); // {"name":"小仙女","sex":"女","age":21} // 【注意】 char型在json字符串中变成了String型,如:sex // 或者 Person person = new Person("小仙女", '女', 21); JSONObject jsonObject2 = JSONObject.fromObject(person);// 静态方法 String jsonString2 = jsonObject2.toString(); response.getWriter().println(jsonString2); // {"age":21,"name":"小仙女","sex":"女"} } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } }
json1.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>服务器返回JSON字符串</title> <script type="text/javascript"> // 创建XMLHttpRequest对象 function createXMLHttpRequest(){ try{ return new XMLHttpRequest();// 大多数浏览器 }catch(e){ try{ return ActvieXObject("Msxml2.XMLHTTP");//IE6.0 }catch(e){ try{ return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本 }catch(e){ throw e; } } } } window.onload = function(){ // 创建XMLHttpRequest对象 var xmlHttpRequest = createXMLHttpRequest(); // 与服务器建立连接 xmlHttpRequest.open("GET","${pageContext.request.contextPath}/AServlet",true); // 设置请求参数,GET方式应该设置为null xmlHttpRequest.send(null); // 注册状态监听事件 xmlHttpRequest.onreadystatechange = function(){ if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ var jsonString = xmlHttpRequest.responseText; // eval()函数执行js代码(json字符串),得到json对象 var person = eval("("+jsonString+")"); document.write(person.name+","+person.sex+","+person.age); // 小仙女,女,21 } }; }; </script> </head> <body> </body> </html>
访问:http://localhost:8080/JavaWeb1/json1.jsp
---------------------------
BServlet.java
package zh.servlet.demo; import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; public class BServlet extends HttpServlet { private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); /* * JSONArray是一个List */ Person p1 = new Person("小仙女", '女', 21); Person p2 = new Person("小鱼儿", '男', 22); // // JSONArray jsonArray1 = new JSONArray(); // jsonArray1.add(p1); // jsonArray1.add(p2); // String jsonString1 = jsonArray1.toString(); // response.getWriter().println(jsonString1); // [{"age":21,"name":"小仙女","sex":"女"},{"age":22,"name":"小鱼儿","sex":"男"}] // 或者 List<Person> personList = new ArrayList<Person>(); personList.add(p1); personList.add(p2); JSONArray jsonArray2 = JSONArray.fromObject(personList); String jsonString2 = jsonArray2.toString(); response.getWriter().println(jsonString2); // [{"age":21,"name":"小仙女","sex":"女"},{"age":22,"name":"小鱼儿","sex":"男"}] } }
json2.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>服务器返回JSON字符串</title> <script type="text/javascript"> // 创建XMLHttpRequest对象 function createXMLHttpRequest(){ try{ return new XMLHttpRequest();// 大多数浏览器 }catch(e){ try{ return ActvieXObject("Msxml2.XMLHTTP");//IE6.0 }catch(e){ try{ return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本 }catch(e){ throw e; } } } } window.onload = function(){ // 创建XMLHttpRequest对象 var xmlHttpRequest = createXMLHttpRequest(); // 与服务器建立连接 xmlHttpRequest.open("POST","${pageContext.request.contextPath}/BServlet",true); // 设置请求参数,POST方式应该设置Content-Type xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttpRequest.send(null); // 注册状态监听事件 xmlHttpRequest.onreadystatechange = function(){ if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ var jsonString = xmlHttpRequest.responseText; // eval()函数执行js代码(json字符串),得到json对象数组 // 【注意】BServlet返回的是List<JSON字符串>,由于js无集合类型,因此eval()执行后得到Array var personArray = eval("("+jsonString+")"); for(var i = 0;i<personArray.length;i++){ var person = personArray[i]; document.write(person.name+","+person.sex+","+person.age+"<br>"); } /* 小仙女,女,21 小鱼儿,男,22 */ } }; }; </script> </head> <body> </body> </html>
访问:http://localhost:8080/JavaWeb1/json2.jsp