您的位置：首页 > Web前端 > JavaScript

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

2013-04-02 17:22 513 查看
表单的验证分为：

客户端确认

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

服务器端确认

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

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
{
@Override
protected 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);
}
}

@Override
protected 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，时间不变
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航