javaScript复习+ajax技术

回顾jsp+servlet+jdbc开发流程：

jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="utf-8"%>

<%
    String path = request.getContextPath() + "/";


%>    
<!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=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<H1>用户注册</H1>
<form action="<%=path %>servlet/UserRister" method="post">
    账号:<input type="text" name="account"><br>  
    密码:<input type="password" name="pwd"><br>
    <input type="submit" value="注册"><br>
</form>
</body>
</html>

servlet代码：

package com.xingxue.servlet.user;

import java.io.IOException;

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

import com.xingxue.dao.UserDao;
import com.xingxue.model.po.UserPo;

/**
 * Servlet implementation class UserRister
 */
public class UserRister extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public UserRister() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //处理乱码
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");

        //获取参数
        String account = request.getParameter("account");
        String pwd = request.getParameter("pwd");
        UserPo user = new UserPo(0, account, pwd, null, null);

        //调用dao
        UserDao dao = new UserDao();
        boolean isAdd = dao.userRegister(user);


        //跳转页面
    }

}

dao代码：

package com.xingxue.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import com.xingxue.model.po.UserPo;
import com.xingxue.utils.DBUtils;

public class UserDao {

    public boolean userRegister(UserPo user) {
        Connection conn = null;
        PreparedStatement pre = null;
        ResultSet rs = null;
        int result = 0;
        String sql = "INSERT INTO `test`.`user` (`id`, `account`, `pwd`, `statu`, `createdate`) "
                + "VALUES (null, ?, ?, '1', now())";

        try {
            conn = DBUtils.getConn();
            pre = conn.prepareStatement(sql);
            pre.setString(1, user.getAccount());
            pre.setString(2, user.getPwd());

            result = pre.executeUpdate();

        } catch (Exception e) {
            e.printStackTrace();
        }

        return result > 0;
    }

}

实体类：

package com.xingxue.model.po;

import java.util.Date;

public class UserPo {

    private int id;
    private String account;
    private String pwd;
    private String statu;
    private Date date;

    public UserPo(){}

    public UserPo(int id, String account, String pwd, String statu, Date date) {
        super();
        this.id = id;
        this.account = account;
        this.pwd = pwd;
        this.statu = statu;
        this.date = date;
    }
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getAccount() {
        return account;
    }
    public void setAccount(String account) {
        this.account = account;
    }
    public String getPwd() {
        return pwd;
    }
    public void setPwd(String pwd) {
        this.pwd = pwd;
    }
    public String getStatu() {
        return statu;
    }
    public void setStatu(String statu) {
        this.statu = statu;
    }
    public Date getDate() {
        return date;
    }
    public void setDate(Date date) {
        this.date = date;
    }

    @Override
    public String toString() {
        return "UserPo [id=" + id + ", account=" + account + ", pwd=" + pwd
                + ", statu=" + statu + ", date=" + date + "]";
    }
}

测试成功

但是我们发现一个问题，页面提交数据的时候，有可能产生非法数据，也被提交到了服务器，这可能会导致程序异常，那我们就需要对这些异常进行处理，有两种处理方法，1、在服务器判断：不是很特殊的功能不用，
2、客户端利用js验证：
利用javascript阻止表单提交数据：
回顾javascript：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="utf-8"%>

<%
    String path = request.getContextPath() + "/";


%>    
<!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=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
    //定义函数
    function yanzheng() {
        //DOM编程  通过js代码操作html标签
        var account = document.getElementById("account").value;
        var pwd = document.getElementById("pwd").value;

        if(account == "" || pwd == "") {
            return false;
        }else {
            return true;
        }

    }


</script>

</head>
<body>
<H1>用户注册</H1>
<form onsubmit="return yanzheng()"  action="<%=path %>servlet/UserRister" method="post">
    账号:<input id="account"  type="text" name="account"><br>  
    密码:<input id="pwd" type="password" name="pwd"><br>
    <input type="submit" value="注册"><br>
</form>
</body>
</html>

在form标签又一个onsubmit的方法，就是当表单提交的时候调用，我们里面协商return 函数名，表示函数返回true提交，返回false不提交.

升级版验证方法：
//定义函数

    function yanzheng() {
        //DOM编程  通过js代码操作html标签
        var account = document.getElementById("account").value;
        var pwd = document.getElementById("pwd").value;

        if(account == "") {
            alert("账号不能为空！");
            return false;
        }

        if(pwd == "") {
            alert("密码不能为空！");
            return false;
        }

        return true;
    }

    //定义函数
    function yanzheng2() {
        //DOM编程  通过js代码操作html标签
        var account = document.getElementById("account").value;
        var pwd = document.getElementById("pwd").value;

        if(account == "") {
            var msg = document.getElementById("accountMsg");
            msg.innerText = "账号不能为空！";
            return false;
        }else {
            var msg = document.getElementById("accountMsg");
            msg.innerText = "";
        }

        if(pwd == "") {
            var msg = document.getElementById("pwdMsg");
            msg.innerText = "密码不能为空！";
            return false;
        }

        return true;
    }

ajax技术：

ajax是一种异步提交数据的方式，

主要是基于一个异步http请求对象， XMLHTTPRequest对象，以前我们用get和post提交数据的时候，都是浏览器帮我们封装数据，提交到服务器，
如果使用ajax提交就需要我们自己创建请求对象，自己封装数据，自己提交数据

1、创建ajax对象
2、打开请求包，设置提交的地址
3、发送数据
4、接收数据

function checkAccount() {
        //创建异步请求对象
        var request = null;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            request=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            request=new ActiveXObject("Microsoft.XMLHTTP");
        }
        var account = document.getElementById("account").value;
        //打开请求，设置提交地址
        request.open("GET","<%=path%>servlet/CheckAccount?account="+account ,true);
        //发送数据
        request.send();

        //当服务器返回数据之后会默认调用一个方法：会被调用4次
        request.onreadystatechange = function() {
            if(request.readyState == 4){
                var info =  request.responseText;
                if(info == "ok") {
                    alert("账号可用！");
                }else {
                    alert("账号已存在！");
                }
            }
        }
    }

对于ajax来说，他的核心对象是XMLHTTPRequest，该对象能异步往服务器发送数据，但是需要我们手动创建，手动指定地址，手动发送数据，

对于该对象来说核心操作如下：
open方法：创建一个链接到服务器，指定提交数据的方式，和服务器地址
send方法：发送数据到服务器
redayState：表示ajax对象的状态，有一下几种状态
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法，正在发送请求
2 - (载入完成)send()方法执行完成，数据发送完成
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成，可以在客户端调用了
readyState的值会随着request进行改变，
onreadystatechange 方法：改方法是当readyState发生改变的时候自动调用，
0到1不调用该方法， 1到2, 2到3, 3到4就会调用该方法

总结：我们目前客户端往服务器提交数据的方式有三种
get、post、ajax

ajax就是一种不需要刷新页面就可以提交数据的方式

javaScript复习+ajax技术

猜你喜欢