JavaWeb之Ajax

其他 2018-06-23 20:37:10 阅读次数: 2

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


猜你喜欢

转载自blog.csdn.net/qq_41706150/article/details/80702055
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022