第6章 AJAX+JSP+Servlet整合开发【首页】杜老师

创建web项目：01JavaWeb06, 01学号

0. 【首页】及配置文件

html：WebRoot\index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">
		<title>第6章 AJAX+JSP+Servlet整合开发【首页】杜老师</title>
	</head>
	<body>
	<h1>第6章 AJAX+JSP+Servlet整合开发【首页】杜老师</h1>
	<hr />
	<a href="Clock01.html">1. 动态时钟(javascrip)</a><br />
	<a href="Testonreadystatechange01.html">2. 创建XMLHttpRequest对象</a><br />
	<a href="TestDOM01.html">3. 查看DOM节点(使用firefox浏览器)</a><br />
	<a href="GetDOM01.html">4. 获取DOM节点</a><br />
	<a href="Students01.xml">5. XML数据表示技术(Students01.xml)</a><br />
	<a href="Students01.json.txt">6. Json数据表示技术(Students01.json.txt)</a><br />
	<a href="TestAjax01.html">7. 用户名检查(ajax+servlet, 含UserNameCheck.java)</a><br />
	<a href="MyAlbum01.html">8. 电子相册(ajax+servlet, 含Photo01.java, PhotoServlet01.java)</a><br />
	<a href="PracticeDemo01_01.html">上机题1. 当前日期(JavaScrip)</a><br />
	<a href="PracticeDemo02_01.html">上机题2. 禁止右键图片下载(JavaScrip)</a><br />
	<span>上机题3. 文字跟随鼠标(略)</span><br />
	<a href="Teacher01.xml">上机题4. XML数据表示技术(Teacher01.xml)</a><br />
	<a href="Teacher01.txt">上机题5. Json数据表示技术(Teacher01.txt)</a><br />
	<a href="PracticeDemo06_01.html">上机题6. 解析XML数据(Students01.xml,Teacher01.xml)</a><br />
	<a href="PracticeDemo07_01.html">上机题7. 解析json数据(Teacher01.txt)</a><br />
	<a href="PracticeDemo08_01.html">上机题8. 用户登录(ajax+servlet, 含LoginServlet.java)</a><br />
	<hr />
	<a href="/html/01javaweb.html">返回章节目录</a><br />
</html>

xml：WebRoot\WEB-INF\web.xml，可先注释屏蔽servlet设置调试

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>

<servlet>
		<servlet-name>用户名检查</servlet-name>
		<servlet-class>UserNameCheck01</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>用户名检查</servlet-name>
		<url-pattern>/slet/chk</url-pattern>
	</servlet-mapping>

<servlet>
		<servlet-name>相片</servlet-name>
		<servlet-class>PhotoServlet01</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>相片</servlet-name>
		<url-pattern>/slet/PhotoServlet</url-pattern>
	</servlet-mapping>

<servlet>
		<servlet-name>登录验证</servlet-name>
		<servlet-class>LoginServlet01</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>登录验证</servlet-name>
		<url-pattern>/slet/LoginServlet</url-pattern>
	</servlet-mapping>

</web-app>

1. 动态时钟

javascrip: WebRoot\Clock01.html

2. 创建XMLHttpRequest对象

javascrip: WebRoot\Testonreadystatechange01.html

3. 查看DOM节点(使用firefox浏览器)

html: WebRoot\TestDOM01.html

4. 获取DOM节点

javascrip: WebRoot\GetDOM01.html

<html>
<head>
	<title>查找DOM节点</title>
	<script type="text/javascript">
		function getByID(){
			var element = document.getElementById("node1");//获得ID为node1的节点
			alert(element.value);
		}
		function getByName(){
			var elements = document.getElementsByName("node");//获得Name为node的节点
			var strE = "";									//初始化输出字符串
			for(var i = 0; i < elements.length; i++){		//遍历节点数组
				strE += elements[i].value + "\n";
			}
			alert(strE);									//弹出结果
		}
		function getByTagName(){
			var elements = document.getElementsByTagName("input");//获得TagName为node的节点
			var strE = "";										//初始化输出字符串
			for(var i = 0; i < elements.length; i++){			//遍历节点数组
				strE += elements[i].value + "\n";
			}
			alert(strE);										//弹出结果
		}
	</script>
</head>
<body>
	<INPUT TYPE="text" NAME="node" VALUE="1" id="node1"><br>
	<INPUT TYPE="text" NAME="node1" VALUE="2" id="node2"><br>
	<INPUT TYPE="text" NAME="node" VALUE="3" id="node2"><br>
	<input type="button" value="通过ID获得指定节点" onclick="getByID()"/><br>
	<input type="button" value="通过Name获得指定节点" onclick="getByName()"/><br>
	<input type="button" value="通过TagName获得指定节点" onclick="getByTagName()"/>
</body>
</html>

5. XML数据表示技术

xml WebRoot\Students01.xml

6. Json数据表示技术()

json: WebRoot\Students01.json.txt

7. 用户名检查(ajax+servlet), 用户名输入:杜老师, lmcd 或其他

servlet: src\UserNameCheck01.java

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class UserNameCheck01 extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		ArrayList<String> usernames = new ArrayList<String>();
		usernames.add("杜老师");
		usernames.add("lili");
		usernames.add("lmcd");
		response.setContentType("text/xml; charset=utf-8");//设置响应文本格式
		response.setHeader("Cache-Control", "no-cache");	//设置没有缓存
		PrintWriter out = response.getWriter();				//获得输出流
		request.setCharacterEncoding("utf-8");
		String username = request.getParameter("username");//获得username参数
		boolean flag = false;							//初始化变量falg
		for(String uname : usernames){					//遍历所有的用户名
			if(uname.equals(username)){
				flag = true;
				break;
			}
		}
		if(flag) {									//如果flag为true
			out.println("该用户名已经被占用，请重新输入!");
		}else {										//如果flag为false
			out.println("该用户名可以使用!");
		}
		out.flush();								//刷新输出流
		out.close();								//关闭输出流
	}

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);					//调用doGet方法
	}
}

javascript: WebRoot\TestAjax01.html, 编码格式要与上述UserNameCheck01.java一致并支持汉字，如utf-8。

<html>
<head>
	<title>判断用户名是否被占用</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript">
		function createXMLHttp(){
			var xmlHttp;								//声明xmlHttp变量
			try{
				//如果是Firefox, Opera 8.0+, Safari浏览器，则可以进行创建
				xmlHttp=new XMLHttpRequest();
			}catch (e){
				try{
					//Internet Explorer 6.0+，则可以进行创建
					xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
				}catch (e){
					try{
						//Internet Explorer 5.5+，则可以进行创建
						xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
					}catch (e){
						alert("您的浏览器版本不支持AJAX！");	//浏览器版本不支持		
						return false;
					}
				}
			}
			xmlHttp.onreadystatechange = function(){//定义响应事件处理函数
				if(xmlHttp.readyState == 4){		//响应已经完全接受
					//alert(xmlHttp.responseText);	//弹出响应文本
					document.getElementById("ts").innerHTML = xmlHttp.responseText;
					//ts.innerText = xmlHttp.responseText;
				}
			}
			xmlHttp.open("GET","slet/chk?username=" + document.userform.username.value,true);
			xmlHttp.send(null);
		}
	</script>
</head>
<body>
	<form action="" name="userform">
		用户名:<input type="text" name="username" onblur="createXMLHttp();">
		<span id="ts"></span><br/>
		密  码:<input type="password" name="upw"><br/>
		<input type="submit" value="提交"/>
		<input type="reset" value="重置"/>
	</form>
</body>
</html>

8. 电子相册(ajax+servlet, 含Photo01.java,PhotoServlet01.java,MyAlbum01.html)

图片类: src\Photo01.java, 特别是构造函数

servlet: src\PhotoServlet01.java

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class PhotoServlet01 extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/xml; charset=UTF-8");			// 设置响应文本格式
	    response.setHeader("Cache-Control", "no-cache");			// 设置没有缓存
		PrintWriter out = response.getWriter();						//获得输出流
		ArrayList<Photo01> photos = new ArrayList<Photo01>();
		photos.add(new Photo01("photo/city1.jpg","美丽城市","美丽城市"));
		photos.add(new Photo01("photo/city2.jpg","城市夜景","城市夜景"));
		photos.add(new Photo01("photo/city3.jpg","城市公路","城市公路"));
		int index = Integer.parseInt(request.getParameter("index"));//获得index
		Photo01 currentPhoto = photos.get(index);					//获得当前图片
		out.println(currentPhoto.getUrl() + ":" + currentPhoto.getTitle()
					+ ":" + currentPhoto.getAlt());					//输出图片信息
		out.flush();												//刷新输出流
		out.close();												//关闭输出流
	}
	
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}
}

javascript: WebRoot\MyAlbum01.html

<html>
<head>
	<title>我的相册</title>
	<script type="text/javascript">
		var index = 0;
		
		function ShowPhoto(){
			var xmlHttp;
			try{
				//如果是Firefox, Opera 8.0+, Safari浏览器，则可以进行创建
				xmlHttp=new XMLHttpRequest();
			}catch (e){
				try{
					//Internet Explorer 6.0+，则可以进行创建
					xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
				}catch (e){
					try{
						//Internet Explorer 5.5+，则可以进行创建
						xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
					}catch (e){
						alert("您的浏览器版本不支持AJAX！");	 
						return false;
							}
					 }
			}
			
			xmlHttp.onreadystatechange = function(){//定义响应事件处理函数
				if(xmlHttp.readyState == 4){		//响应已经完全接受
					var responseStr = xmlHttp.responseText;//接受响应文本
					var photoMsg = responseStr.split(":");//分隔响应文本
					document.getElementById("photoI").src = photoMsg[0] ;//设置图片路径
					document.getElementById("photoTitle").innerHTML = photoMsg[1] ;//设置图片标题
					document.getElementById("photoI").alt = photoMsg[2] ;//设置图片标记
				}
			}
			
			xmlHttp.open("GET","slet/PhotoServlet?index="+index,true);
			xmlHttp.send(null);
			if(index > 0) {			//如果index大于0,显示上一页按钮
				document.getElementById("prePhoto").innerHTML = "上一张";
			}
			if(index < 3) {			//如果index小于3,显示下一页按钮
				document.getElementById("nextPhoto").innerHTML = "下一张";
			}
		}

function prePhoto(){
			index--;
			ShowPhoto();
			if(index <= 0) {		//如果index小于或者0,隐藏上一页按钮
				document.getElementById("prePhoto").innerHTML = "";
			}
		}

function nextPhoto(){
			index++;
			ShowPhoto();
			if(index >= 2) {		//如果index大于或者等于2,隐藏下一页按钮	
				document.getElementById("nextPhoto").innerHTML = "";
			}
		}
	</script>
</head>
<body>
	<div align="center">
		<img src="photo/welcome.gif" onclick="ShowPhoto()" id="photoI" width="300" height="200">
	</div>
	<div align="center">
		<p id="photoTitle" style="color:blue">欢迎使用我的电子相册</p>
	</div>
	<div align="center">
		<span onClick="prePhoto();" style="cursor:hand;" id="prePhoto"></span>
		<span onClick="nextPhoto();" style="cursor:hand;" id="nextPhoto">下一张</span>
	</div>
</body>
</html>

上机题1. 当前日期(JavaScrip)

javascrip: PracticeDemo01_01.html

<html>
<head>
	<title>显示当前日期</title>
</head>
<body>
<script type="text/javascript">
	todayDate = new Date();
	date = todayDate.getDate();
	month= todayDate.getMonth() +1;
	year= todayDate.getYear();
	document.write("今天是<br/>")
	if(navigator.appName == "Netscape")
	{
		document.write(1900+year);
		document.write("年");
		document.write(month);
		document.write("月");
		document.write(date);
		document.write("日<br/>");
	}
	if(navigator.appVersion.indexOf("MSIE") != -1){
		document.write(year);
		document.write("年");
		document.write(month);
		document.write("月");
		document.write(date);
		document.write("日<br/>");
	}
	if (todayDate.getDay() == 0) document.write("星期日");
	if (todayDate.getDay() == 1) document.write("星期一");
	if (todayDate.getDay() == 2) document.write("星期二");
	if (todayDate.getDay() == 3) document.write("星期三");
	if (todayDate.getDay() == 4) document.write("星期四");
	if (todayDate.getDay() == 5) document.write("星期五");
	if (todayDate.getDay() == 6) document.write("星期六");
</script>
</body>
</html>

上机题2. 禁止右键图片下载(JavaScrip)

javascrip: PracticeDemo02_01.html

上机题3. 文字跟随鼠标(略)

上机题4. XML数据表示技术

xml: Teacher01.xml

上机题5. Json数据表示技术

json: Teacher01.txt

上机题6. 解析XML数据(教师、学生)

javascript: PracticeDemo06_01.html

<html>
<head>
	<title>解析XML格式信息</title>
		<script type="text/javascript">
		function createXMLHttp(){
			var xmlHttp;								//声明xmlHttp变量
			try{
				//如果是Firefox, Opera 8.0+, Safari浏览器，则可以进行创建
				xmlHttp=new XMLHttpRequest();
			}catch (e){
				try{
					//Internet Explorer 6.0+，则可以进行创建
					xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
				}catch (e){
					try{
						//Internet Explorer 5.5+，则可以进行创建
						xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
					}catch (e){
						alert("您的浏览器版本不支持AJAX！");	//浏览器版本不支持		
						return false;
					}
				}
			}
			xmlHttp.open("GET","Teacher01.xml",true);
			xmlHttp.send(null);
			xmlHttp.onreadystatechange = function(){
				if (xmlHttp.readyState == 4) {
					var xmlDOM=xmlHttp.responseXML;
					var xmlRoot=xmlDOM.documentElement;
					var noNode=xmlRoot.getElementsByTagName("no");
					var nameNode=xmlRoot.getElementsByTagName("name");	//获得文档中<name>标记 
					var ageNode=xmlRoot.getElementsByTagName("age");	//获得文档中<age>标记 
					var workYearNode=xmlRoot.getElementsByTagName("workYear");	//获得文档中<workYear>标记 
					var sexNode=xmlRoot.getElementsByTagName("sex");	//获得文档中<sex>标记 
					for(var i = 0; i < noNode.length; i++) {
						 str="老师编号："+noNode[i].firstChild.nodeValue + "<br>" +
								"老师姓名："+nameNode[i].firstChild.nodeValue + "<br>" +
								"老师年龄："+ageNode[i].firstChild.nodeValue + "<br>" +
								"老师工龄："+workYearNode[i].firstChild.nodeValue + "<br>" +
								"老师性别："+sexNode[i].firstChild.nodeValue + "<br><hr>";
							 document.write(str);
						} 
				}
			}
		}

上机题7. 解析教师json数据

javascript: PracticeDemo07_01.html

<html>
<head>
	<title>显示JSON格式老师信息</title>
	<script type="text/javascript">
		function createXMLHttp(){
			var xmlHttp;
			try{
				//如果是Firefox, Opera 8.0+, Safari浏览器，则可以进行创建
				xmlHttp=new XMLHttpRequest();
			}catch (e){
				try{
					//Internet Explorer 6.0+，则可以进行创建
					xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
				}catch (e){
					try{
						//Internet Explorer 5.5+，则可以进行创建
						xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
					}catch (e){
						alert("您的浏览器版本不支持AJAX！");	
						return false;
					}
				}
			}
			xmlHttp.open("GET","Teacher01.txt",true);
			xmlHttp.send(null);
			xmlHttp.onreadystatechange = function(){
				if (xmlHttp.readyState == 4) {
					var json = xmlHttp.responseText;
					var jsonObject =  eval('(' + json + ')');
					var teacherNum = jsonObject.teachers.length;
					for(var i = 0; i < teacherNum; i++) {
						var teacher = jsonObject.teachers[i];
						var str="老师编号："+teacher.id + "<br/>" +
							"老师姓名："+teacher.name+ "<br/>" +
							"老师年龄："+teacher.age + "<br/>" +
							"老师工龄："+teacher.workYear + "<br/>" +
							"老师性别："+teacher.sex + "<br/><hr/>";
						document.write(str);
					}
				}
			}
		}
	</script>
</head>
<body>
	<input type="button" value ="提取json数据" onclick="createXMLHttp()">
</body>
</html>

上机题8. 用户登录(ajax+servlet)

servlet: LoginServlet01.java

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class LoginServlet01 extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		String yhm = request.getParameter("yhm");  //获得yhm参数
		String mm = request.getParameter("mm");  //获得mm参数
		
		response.setContentType("text/xml; charset=utf-8");//设置响应文本格式
		response.setHeader("Cache-Control", "no-cache");	//设置没有缓存
		PrintWriter out = response.getWriter();				//获得输出流

if("杜老师".equals(yhm) & "123456".equals(mm)) {									//如果flag为true
			out.println("用户名和密码正确!");
		}else {										//如果flag为false
			out.println("用户名和(或)密码错误!");
		}
		out.flush();								//刷新输出流
		out.close();								//关闭输出流
	}

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}
}

javascript: 登录页面 PracticeDemo08_01.html

<html>
<head>
	<title>Ajax登录</title>
	<script type="text/javascript">
		function createXMLHttp(){
			var xmlHttp;
			try{
				//如果是Firefox, Opera 8.0+, Safari浏览器，则可以进行创建
				xmlHttp=new XMLHttpRequest();
			}catch (e){
				try{
					//Internet Explorer 6.0+，则可以进行创建
					xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
				}catch (e){
					try{
						//Internet Explorer 5.5+，则可以进行创建
						xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
					}catch (e){
						alert("您的浏览器版本不支持AJAX！");
						return false;
		      		}
		   		}
			}
			xmlHttp.onreadystatechange = function(){//定义响应事件处理函数
				if(xmlHttp.readyState == 4){		//响应已经完全接受
					alert(xmlHttp.responseText);	//弹出响应文本
				}
			}
			xmlHttp.open("GET","slet/LoginServlet?yhm=" + document.userform.yhm.value + "&mm=" + document.userform.mm.value,true);
			xmlHttp.send(null);
		}
	</script>
</head>
<body>
	<p>只有用户名输入[杜老师]密码输入[123456]才显示正确</p>
	<form name="userform">
		用户名:<input type="text" name="yhm"><br>
		密码:<input type="password" name="mm"><br>
		<input type="button" value="登录"  onClick="createXMLHttp();">
	</form>
</body>
</html>

返回章节目录