8、使用JavaScript与Servlet实现客户端与服务器端验证

来源：互联网发布：mac office快捷键大全编辑：程序博客网时间：2024/04/30 06:07

表单的验证分为：

客户端确认

- 减少服务器负载；缩短用户等待时间；兼容性难

服务器端确认

- 统一确认；兼容性强；服务器负载重

1、javaScript初步

JSP与客户机的交互：
- 从表单中获得参数；返回参数；表单的服务器端确认

JavaScript是一种脚本语言，主要用在客户端，位置放在<head></head>标签中；html的每个标签都有一个id属性，这个属性是给客户端使用的

JavaScript语句结尾的分号可有可无，通常都写上，javascript是一种基于事件的语言，通过事件来触发，对于表单，有onsubmit事件，即提交表单时触发事件，对于input标签，可能返回使用getElementById（）返回HTMLInputElement，

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>My JSP 'mylogin.jsp' starting page</title><script type="text/javascript">function validate(){//获取元素的第一种方式，使用document.getElementById，返回单个元素//var username = document.getElementById("username1");//var password = document.getElementById("password1");//var repassword = document.getElementById("repassword1");//获取元素的第二种方式，使用document.getElementsByName，返回的是元素的一个列表var username = document.getElementsByName("username")[0];var password = document.getElementsByName("password")[0];var repassword = document.getElementsByName("repassword")[0];if(username.value == ""){alert("username can't be blank");return false;}if(password.value.length < 6 || password.value.length > 10){alert("password length is invalid");return false;}if(repassword.value.length < 6 || repassword.value.length > 10){alert("repassword length is invalid");return false;}if(password.value != repassword.value){alert("password not the same");return false;}return true;}</script>  </head>    <body>    <form onsubmit="return validate()">    username:<input type="text" name="username" id="username1"><br>    password:<input type="password" name="password" id="password1"><br>    repassword:<input type="password" name="repassword" id=repassword1"><br>    <input type="submit" value="submit" ><br>    </form>  </body></html>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>        <title>My JSP 'quanxuan.jsp' starting page</title><script type="text/javascript">function selectAll(){var allmail = document.getElementsByName("allmail")[0];var all = document.getElementsByName("mail");if(allmail.checked){for(var i = 0; i< all.length;i++){all[i].checked = true;}}else{for(var i = 0; i< all.length;i++)all[i].checked = false;}//使用标签名获取元素列表var nodes = document.getElementsByTagName("input");for(var i = 0;i<nodes.length;i++){alert(nodes[i].type);}}</script>  </head>    <body>   全选：<input onclick="selectAll()" type="checkbox" name="allmail">   <br/>   <input type="checkbox" name="mail"><br>   <input type="checkbox" name="mail"><br>   <input type="checkbox" name="mail"><br>   <input type="checkbox" name="mail"><br>   <input type="checkbox" name="mail"><br>   <input type="checkbox" name="mail"><br>   <input type="checkbox" name="mail"><br>   <input type="checkbox" name="mail"><br>   <input type="radio"/>   <input type="text"/>   <input type="password"/>   <input type="file"/>   </body>   </html>

2、服务器端验证：

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;public class ValidateServlet extends HttpServlet{@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException{String username = req.getParameter("username");String password = req.getParameter("password");String repassword = req.getParameter("repassword");List<String> list = new ArrayList<String>();if("".equals(username)){list.add("username can't ben blank");}if(password == null || password.length()<6 || password.length() > 10){list.add("length of password should be between 6 and 10");}if(repassword == null || repassword.length()<6 || repassword.length() > 10){list.add("length of repassword should be between 6 and 10");}if(password != null && repassword !=null && !password.equals(repassword)){list.add("password not same");}if(list.isEmpty()){req.setAttribute("username", username);req.setAttribute("password", password);req.getRequestDispatcher("success.jsp").forward(req, resp);}else{req.setAttribute("error", list);req.getRequestDispatcher("error.jsp").forward(req, resp);}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException{this.doGet(req, resp);}}

3、表单的服务器端确认

- 在客户端不能用JSP进行确认；分工：数据处理在服务器端；时效性：客户端得到服务器确认后表明数据已经到达服务器；客户端兼容性好；缺点：加大服务器负载和客户等待时间。

4、JavaBean

- JavaBean是一种可重复使用、且跨平台的软件组织。JavaBean可分为两种：一种是由用户界面（UI，User Interface）的JavaBean；还有一种是没有用户界面，主要负责处理事务（如数据运算，操纵数据库）的JavaBean。JSP通常访问的是后一种JavaBean。

- JSP与JavaBean搭配使用的优点：
使得HTML与Java程序分离，这样便于维护代码。如果把所有的程序代码都写在JSP网页中，会使得代码繁杂，难以维护；可以降低开发JSP网页人员对Java编程能力的要求；JSP侧重于生成动态网页，事务处理由JavaBean来完成，这样可以充分利用JavaBean组件的可重用性特点，提高开发网站的效率。

-JavaBean的特征：一个标准的JavaBean有以下几个特性：
-JavaBean是一个公共的（public）类；JavaBean有一个不带参数的构造方法；JavaBean通过setxxx方法设置属性，通过getxxx方法获取属性。（为了反射）

- 一个典型的JavaBean：

public class CounterBean{    private int count = 0;     public CounterBean(){}    public int getCount(){        return count;    }    public void setCount(int count){        this.count = count;    }}

5、MVC设计模式（Model——模型 View——视图 Control——控制）

view主要是jsp，controler主要是servlet，model是处理类

6、JSP访问JavaBean的语法：

    1）导入JavaBean类
    2）声明JavaBean对象
    3）访问JavaBean属性

通过<%@ page import= %>指令导入JavaBean类，如<%@ page import="mypack.CounterBean" %>
声明JavaBean对象：使用<jsp:useBean>标签来声明JavaBean对象，如：<jsp:useBean id="myBean" class="mypack.CounterBean" scope="session" />
访问JavaBean属性：JSP提供了访问JavaBean属性的标签，如果要将JavaBean的某个属性输出到页面上，可以使用<jsp:getProperty>标签，例如：
<jsp:getProperty name="myBean" property="count" />
如果要给JavaBean的某个属性赋值，可以使用<jsp:setProperty>标签，例如：
<jsp:setProperty name="myBean" property="count" value="0" />

一个JSP使用JavaBean的例子：

JavaBean：

public class Person{private String name = "zhangsan";private int age = 10;private String address = "shanghai";public String getName(){return name;}public void setName(String name){this.name = name;}public int getAge(){return age;}public void setAge(int age){this.age = age;}public String getAddress(){return address;}public void setAddress(String address){this.address = address;}}

jsp网页：

<%@ page language="java" import="java.util.*,com.cdtax.bean.Person" pageEncoding="UTF-8"%><%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>My JSP 'javabean.jsp' starting page</title>    <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">-->  </head>    <body>    <jsp:useBean id="person" class="com.cdtax.bean.Person"></jsp:useBean>        <jsp:getProperty property="name" name="person"/><br>    <jsp:getProperty property="age" name="person"/><br/>    <jsp:getProperty property="address" name="person"/>  </body></html>

jsp生成的java类源代码，三个jsp：getProperty源代码：

 out.write(org.apache.jasper.runtime.JspRuntimeLibrary.toString((((com.cdtax.bean.Person)_jspx_page_context.findAttribute("person")).getName())));      out.write("<br>\r\n");      out.write("    ");      out.write(org.apache.jasper.runtime.JspRuntimeLibrary.toString((((com.cdtax.bean.Person)_jspx_page_context.findAttribute("person")).getAge())));      out.write("<br/>\r\n");      out.write("    ");      out.write(org.apache.jasper.runtime.JspRuntimeLibrary.toString((((com.cdtax.bean.Person)_jspx_page_context.findAttribute("person")).getAddress())));

使用的就是JavaBean的get方法，本质上就是<%= person.getName() %>

<jsp:useBean id="person" class="com.cdtax.bean.Person">实际上就是<% Person person = new Person();%>,使用<jsp:useBean>只是页面上没有java脚本，显得比较整洁，符合页面的编写方式。id的值就是引用变量person

7、JavaBean属性以及用法

- id="beanInstanceName"，在所定义的范围中确认Bean的变量，使之能在后面的程序中使用此变量名来分辨不同的Bean，这个变量名对大小写敏感，必须符合所使用的脚本语言的规定，这个规定在Java Language规范中已经写明。如果Bean已经在别的"<jsp:useBean>"标签中创建，则当使用这个已经创建过的Bean时，id的值必须与原来的那个id值一致；否则则意味着创建了同一个类的两个不同的对象。

- 属性赋值<jsp:setProperty>它的property=“propertyName” value=“{String | <%= expression%>}"，使用指定的值来设置Bean属性，这个值可以是字符串，也可以是表达式。如果是字符串，那么它就会被转换成Bean属性的类型。如果是一个表达式，那么它的类型就必须和将要设定的属性值的类型一致，不能在同一个”<jsp:setProperty>“中同时使用param和value参数。

- property = "propertyName" [param = "parameterName"]，用一个参数值来指定Bean中的一个属性值，一般情况下是从request对象中获取的，其中property指定Bean的属性名，param指定request中的参数名。param的实际代码使用是request.getparameter(“xxx”)；使用param可以实现动态赋值

<jsp:setProperty property="age" name="person" param="helloworld"/>     <jsp:getProperty property="age" name="person"/>

8、JavaBean的范围

scope属性决定了JavaBean对象存在的范围。scope可选值包括：page（默认）、request、session、application

- JavaBean在page范围内：客户每次请求访问JSP页面时，都会创建一个JavaBean对象。JavaBean对象的有效范围是客户请求访问的当前JSP网页。JavaBean对象在以下两种情况下都会结束生命期：1、客户请求访问的当前JSP页面通过<forward>标记将请求转发到另一个文件；2、客户请求访问的当前JSP页面执行完毕并向客户端发回响应。

-JavaBean在request范围内：客户每次请求访问JSP页面时，都会创建新的JavaBean对象。JavaBean对象的有效范围为：1、客户请求访问的当前JSP网页；2、和当前JSP页面共享同一个客户请求的网页，即当前JSP网页中<%@ include%>指令以及<forward>标记包含的其他JSP文件；3、当所有共享同一个客户请求的JSP页面执行完毕并向客户端发回响应时，JavaBean对象结束生命周期。
JavaBean对象作为属性保存在HttpRequest对象中，属性名为JavaBean的id，属性值为JavaBean对象，因此也可以通过HttpRequest.getAttribute（）方法huodeJavaBean对象，例如：CounterBean obj = (CounterBean)request.getAttribute("myBean");

- JavaBean在session范围内：JavaBean对象被创建后，它存在于整个session的生存周期内，同一个session中的JSP文件共享这个JavaBean对象。
JavaBean对象作为属性保存在HttpSession对象中，属性名为JavaBean的id，属性值为JavaBean对象。除了可以通过JavaBean的id直接引用JavaBean对象外，也可以通过HttpSession.getAttribute（）方法取得JavaBean对象，例如：CounterBean obj = (CounterBean)session.getAttribute("myBean");

- JavaBean在application范围内:JavaBean对象作为属性保存在application对象中，属性名为JavaBean的id，属性值为JavaBean对象。除了可以通过JavaBean的id直接引用JavaBean对象外，也可以通过application.getAttribute（）方法取得JavaBean对象，例如：CounterBean obj = (CounterBean)application.getAttribute("myBean");

9、jsp生成的源代码分析：

当使用<jsp:useBean id="person" class="com.cdtax.bean.Person" scope="session"></jsp:useBean>时，对应的java程序代码为：

 com.cdtax.bean.Person person = null;      synchronized (session) {        person = (com.cdtax.bean.Person) _jspx_page_context.getAttribute("person", PageContext.SESSION_SCOPE);        if (person == null){          person = new com.cdtax.bean.Person();          _jspx_page_context.setAttribute("person", person, PageContext.SESSION_SCOPE);        }      }

生成代码表明，id所代表的的对象引用person，是从session中取出的，使用getAttribute方法，如果是第一次，则session没有，返回空null，那么就新生成一个，然后使用setAttribute将对象设置入session中。

10、一个容易误解而又能特别说明scope问题的例子：

<jsp:useBean id="date" class="java.util.Date" scope="session"/>   <%= date.toLocaleString() %>

scope如果是page或request，每次刷新页面，时间都会变，如果变成session或application，时间不变