Ajax

========================Web 2.0==========================
特点：
    1.用户贡献内容
    2.内容聚合
    3.更丰富的"用户体验"
    
不刷新窗口
    1.自动补全
    2.每个"窗口"可以关闭、最小化和进行个性化设置
    3.内容聚合

========================Ajax==========================
无刷新：不刷新整个页面，只刷新局部
    典型：登录
    
优势：
    提供连续的用户体验
    提供类似C/S的交互，操作更方便
    
Ajax（Asynchronous JavaScript And Xml）：只刷新局部页面的技术
    Asynchronous : 发送请求后不等返回结果，由回调函数处理结果
    JavaScript ：更新局部的网页
    Xml ：请求数据和响应数据的封装
    XMLHttpRequest对象 ：发送请求到服务器并获得返回结果
    
=========================★★★JavaScript对象XMLHttpRequest★★★===================
1.核心
2.提供异步发送请求的能力

方法
    a.open(method,URL,async)
        1)建立与服务器的连接
        2)method参数指定请求的HTTP方法,典型的值是GET或POST
        3)URL参数指定请求的地址
        4)async参数指定是否使用异步请求，其值为true或false
    b.send(content)
        1)发送请求
        2)content参数指定请求的参数            2
    c.setRequestHeader(header,value)
        设置请求的头信息
        
属性
    1.onreadystatechange：指定回调函数
    
    2.readystate: XMLHttpRequest的状态信息
        0 : XMLHttpRequest对象没有完成初始化
        1 : XMLHttpRequest对象开始发送请求
        2 : XMLHttpRequest对象的请求发送完成
        3 : XMLHttpRequest对象开始读取响应，还没有结束
        4 : XMLHttpRequest对象读取响应结束
        
    3.status：HTTP的状态码
        200 : 服务器响应正常
        400 : 无法找到请求的资源
        403 : 没有访问权限
        404 : 访问的资源不存在
        500 : 服务器内部错误

    4.responseText：获得响应的文本内容
    
    5.responseXML：获得响应的XML文档对象

===================================$.ajax()================================
jQuery常用Ajax方法
    1)$.ajax()
    2)$.get()
    3)$.post()
    4)$.getJSON()
    5)$(选择器).load()

$.ajax()
    1.语法：$.ajax([setting]);
    2.常用函数参数
        String url :        发送请求的地址，默认为当前页地址
        String type :        请求方式（POST或GET，默认为GET）
        Number timeout :    设置请求超时时间
        Object data :        或
        String data :        发送到服务器的数据
        String dataType :    预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text
        boolean  global :    表示是否触发全局Ajax事件，默认为true
        
        function beforeSend(XMLHttpRequest xhr) ：    发送请求前调用的函数
                                                   　　　　　　　　　参数xhr：可选
                                                    
        function complete(XMLHttpRequest xhr,String ts) ：    请求完成后调用的函数
                                                            　　　　　　　　　参数xhr：可选
                                                            　　　　　　　　　参数ts：可选，描述请求类型的字符串
                                                            
        function  success(Object result,String ts) ：        请求成功后调用的函数
                                                            　　　　　　　参数result：可选，由服务器返回的数据
                                                           　　 　　　　　参数ts：可选，描述请求类型的字符串
                                                            
        function error(XMLHttpRequest xhr,String em,Exception e) ：    请求失败时被调用的函数
                                                                    　　　　　　　　　　　参数xhr：可选
                                                                    　　　　　　　　　　　参数em：可选，错误信息
                                                                    　　　　　　　　　　　参数e：可选，捕获的异常对象
            
=======================使用Ajax验证用户名=======================
一、传统Ajax实现
缺点：方法、属性、常用值太多 ; 步骤繁琐 ; 浏览器兼容
1.实现无刷新用户名验证
    a.当用户名文本框失去焦点时，发送请求到服务器，判断用户名是否存在
    b.如果已经存在则提示：“用户名已被可用”
    c.如果不存在则提示：“用户名可以可用”
    
2.使用文本框的onBlur事件

3.使用Ajax技术实现异步交互
    a.创建XMLHttpRequest对象
    b.通过 XMLHttpRequest对象设置请求信息
    c.创建回调函数，根据响应状态动态更新页面( xhr.onreadystatechange = function(){};)
    d.向服务器发送请求
    
范例：
    //1.checkname.jsp

<form name="form1" action="" method="post">
    <lable for="username">用户名</lable>
    <input type="text" id="username" name="username" onblur="checkUserExists()" />
    <div id="mess" style="display: inline"/>            
</form>

    //2.使用JavaScript验证用户名- checkname.jsp 

function checkUserExists() {
        var f = document.form1;
        var username = f.username.value;
        if (username == "") {
            alert("用户名不能为空");
            return false;
        } else {
            doAjax("CheckUserServlet?username=" + username);
        }
}

    //3.使用Ajax进行处理-checkname.jsp

 function doAjax(url) {
        var xhr;
        //1. 创建XMLHttpRequest对象
        if (window.ActiveXObject) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        } else if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        }
        
        //2. 设置需要打开的方式
        xhr.open("post", url, true);
        //如果以post方式请求，必须要添加
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        //3. 设置回调函数
        if (xhr.readyState == 4) {
            var messdiv = document.getElementById("mess");
            if (xhr.status == 200) {
                if (xmlhttp.responseText == "false") {
                    messdiv.innerHTML = "用户名可以使用";
                } else {
                    messdiv.innerHTML = "用户名已被使用";
                }
            } else {
                alert("请求处理返回的数据有错误");
            }
        }

        //4. 发送消息
        xhr.send(null);
 }

二、jQuery实现Ajax（即，$.ajax()实现）
1.实现无刷新用户名验证（同上）

2.使用$.ajax() 实现异步交互

$.ajax({
        url : url,                        //要提交的URL路径
        type : "get",                     //发送请求的方式
        data : data,                      //要发送到服务器的数据
        dataType : "text",                //指定传输的数据格式
        success : function(result) {    //请求成功后要执行的代码
        },
        error : function() {         //请求失败后要执行的代码
        }
 });

jQuery的ajax方法获取json数据

$.ajax({
        url : url,                        //要提交的URL路径
        type : "get",                     //发送请求的方式
        data : data,                      //要发送到服务器的数据
        dataType : "json",                //指定传输的数据格式为json
        success : function(result) {    //请求成功后要执行的代码
        },
        error : function() {         //请求失败后要执行的代码
        }
 });

范例：
1.index.jsp

<%-- 引入JSP页面PAGE指令 --%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 引入JSTL标签指令 --%>
<%-- <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> --%>
<!DOCTYPE html>
<html language="zh-CN">
<head>
    <meta charset="utf-8">
    <!-- 设置浏览器渲染的引擎  -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- 设置支持移动设备  -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>网页标题</title>
    <!-- 引用bootstrap样式 -->
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="home" data-url="reg.jsp">
            主页内容
        </div>
        <div role="tabpanel" class="tab-pane fade" id="profile">
            个人页面
        </div>
        <div role="tabpanel" class="tab-pane fade" id="messages">
            消息页面
        </div>
        <div role="tabpanel" class="tab-pane fade" id="settings">
            设置页面
        </div>
    </div>
    </div>
    
    <!-- 引用外部JS文件  -->
    <script type="text/javascript" src="../js/jquery-2.2.4.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(function() {
            $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
                //e.target // newly activated tab
                  //e.relatedTarget // previous active tab
              //console.log(e.relatedTarget);
                var $tab = $($(e.target).attr('href'));
                $tab.load($tab.data('url'));
            });
        });
    </script>
</body>
</html>

2.ValidNameServlet.java

package com.Elastic.AjaxDemo.ivy.controller;
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;

/**
 * Servlet implementation class ValidNameServlet
 */
public class ValidNameServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ValidNameServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获得客户端发来的用户名和密码
        String userName = request.getParameter("userName");
        String passWord = request.getParameter("password");
        System.out.println(userName);
        System.out.println(passWord);
        
        PrintWriter out = response.getWriter();
        out.print(true);
        out.flush();
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }
}

3.reg.jsp

<%-- 引入JSP页面PAGE指令 --%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 引入JSTL标签指令 --%>
<%-- <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> --%>
<!DOCTYPE html>
<html language="zh-CN">
<head>
    <meta charset="utf-8">
    <!-- 设置浏览器渲染的引擎  -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- 设置支持移动设备  -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>网页标题</title>
    <!-- 引用bootstrap样式 -->
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid">
        <h1 class="text-center">注册</h1>
        <form class="form-horizontal" role="form" action="" name="regForm">
            <div class="form-group">
                <label for="userName" class="col-sm-2 control-label">用户名:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="userName" name="userName" placeholder="QQ/邮箱/手机号" autocomplete="off" onblur="checkUserExists()">
                    <span id="msg"></span>
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="col-sm-2 control-label">密码:</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" autocomplete="off" onblur="checkUserExists1()">
                    <span id="msg1"></span>
                </div>
            </div>
          </form>
    </div>
    
    <!-- 引用外部JS文件  -->
    <script type="text/javascript" src="../js/jquery-2.2.4.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <!-- <script type="text/javascript">
    
         function checkUserExists() {
            var form = document.regForm;
            var value = form.userName.value;
            if ("" == value) {
                document.getElementById("msg").innerHTML = "用户名不能为空!";
            } else {
                //进行ajax验证
                doAjax("../validName?userName=" + value);
            }
        }
        
        function checkUserExists1() {
            var form = document.regForm;
            var value = form.password.value;
            if ("" == value) {
                // ★id唯一★
                document.getElementById("msg1").innerHTML = "密码不能为空!";
            } else {
                //进行ajax验证
                doAjax("../validName?password=" + value);
            }
        }
        
        function doAjax(url) {
            //1.创建XMLHttpRequest对象
            alert();
            var xhr = null;
            if (window.ActiveXObject) {// 判断是否是IE浏览器
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            } else if (window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }
            if (null == xhr) {
                alert("浏览器不支持Ajax操作");
            }
            console.log(xhr);
            
            //2.设置请求的信息
            xhr.open("get", url, true);
            
            //3.设置回调函数
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        //响应服务器的内容
                        console.log("输出服务器发回的内容");
                        console.log(xhr.responseText);
                    } else {
                        console.log("服务器响应错误!");
                    }
                }
            };
            
            //4.发送请求
            xhr.send(null);
        }
    </script> -->
    
    <script type="text/javascript">
        //使用jQuery的Ajax方式
        $(function() {
            $('#userName').blur(function() {
                var value = $(this).val();
                $.ajax({
                    url : 'validName',
                    type : 'post',
                    data : {userName : value},
                    dataType : 'json',
                    beforeSend : function() {
                        if ('' == value) {
                            $('#msg').html('用户名不能为空!');
                            return false;
                        }
                        if (value.length < 6) {
                            $('#msg').html('用户名长度不能小于6位!');
                            return false;
                        }
                        return true;
                    },
                    success : function(result) {
                        console.log(result);
                    },
                    error : function() {
                        alert('服务器错误');
                    }
                });
            });
            
            $('#password').blur(function() {
                var value = $(this).val();
                $.ajax({
                    url : 'validName',
                    type : 'post',
                    data : {password : value},
                    dataType : 'json',
                    beforeSend : function() {
                        if ('' == value) {
                            // ★id唯一★
                            $('#msg1').html('密码不能为空!');
                            return false;
                        }
                        if (value.length > 12 || value.length < 6 ) {
                            $('#msg1').html('密码长度6-12位!');
                            return false;
                        }
                        return true;
                    },
                    success : function(result) {
                        console.log(result);
                    },
                    error : function() {
                        alert('服务器错误');
                    }
                });
            });
        });
    </script>
</body>
</html>

=============================范例：无刷新技术===========================

1.dao包

a.BaseDao 类

/**
 * 
 */
package com.Elastic.SystemDemo.ivy.dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;

import com.mysql.jdbc.Statement;

/**
 * 描述类的基本功能<br/>
 * <p>
 * <h3>具体功能发布描述</h3>
 * </p>
 * @author     Ivy
 * @version    1.0
 * @date 2016年6月12日 上午11:00:00
 * @copyright Elastic
 */
public class BaseDao {


    private static String url = "jdbc:mysql://localhost:3306/systemdemo";
    private static String user = "root";
    private static String password = "root";

    /**
     * 获取数据库连接对象
     * 
     * @return
     */
    public static Connection getConnection() {

        try {
            Class.forName("com.mysql.jdbc.Driver");
            return DriverManager.getConnection(url, user, password);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }

    public static int executeUpdate(String sql, List<?> params) {

        // 准备变量，用来保存数据库连接对象，执行命令的对象和结果
        Connection conn = null;
        PreparedStatement pstmt = null;
        int rows;
        try {
            // 获取数据连接对象
            conn = getConnection();
            pstmt = conn.prepareStatement(sql);
            // 设置参数
            if (params != null && params.size() > 0) {

                for (int i = 0; i < params.size(); i++) {
                    pstmt.setObject(i + 1, params.get(i));
                }
            }
            rows = pstmt.executeUpdate();
        } catch (SQLException e) {
            e.printStackTrace();
            rows = -1;
        } finally {
            closeAll(null, pstmt, conn);
        }
        return rows;

    }

    /**
     * 释放资源
     * 
     * @param rs
     *            结果集对象,如果没有填写null
     * @param pstmt
     *            执行SQL语句的对象,如果没有填写null
     * @param conn
     *            数据库连接对象,如果没有填写null
     */
    public static void closeAll(ResultSet rs, PreparedStatement pstmt, Connection conn) {

        try {
            if (rs != null) {
                rs.close();
            }
            if (pstmt != null) {
                pstmt.close();
            }
            if (conn != null) {
                conn.close();
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }

    }

}

b.UserDao 类

/**
 * 
 */
package com.Elastic.SystemDemo.ivy.dao;

import java.io.Serializable;

import com.Elastic.SystemDemo.ivy.entity.User;

/**
 * 描述类的基本功能<br/>
 * <p>
 * <h3>具体功能发布描述</h3>
 * </p>
 * @author     Ivy
 * @version    1.0
 * @date 2016年6月12日 下午3:38:15
 * @copyright Elastic
 */
public interface UserDao {
    User find(Serializable id);
}

2.dao.impl包

a.UserDaoImpl 类

/**
 * 
 */
package com.Elastic.SystemDemo.ivy.dao.impl;

import java.io.Serializable;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import com.Elastic.SystemDemo.ivy.dao.BaseDao;
import com.Elastic.SystemDemo.ivy.dao.UserDao;
import com.Elastic.SystemDemo.ivy.entity.User;
import com.mysql.jdbc.Statement;


/**
 * 描述类的基本功能<br/>
 * <p>
 * <h3>具体功能发布描述</h3>
 * </p>
 * @author     Ivy
 * @version    1.0
 * @date 2016年6月12日 下午3:37:36
 * @copyright Elastic
 */
public class UserDaoImpl implements UserDao{

    /* (non-Javadoc)
     * @see com.Elastic.SystemDemo.ivy.dao.UserDao#find(java.io.Serializable)
     */
    @Override
    public User find(Serializable id) {
        User user = null;
        String sql = "select * from user where userName = ?";
        // 定义查询需要使用的SQL对象
        Connection conn = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;

        try {
            conn = BaseDao.getConnection();
            pstmt = conn.prepareStatement(sql);
            pstmt.setObject(1, id);

            rs = pstmt.executeQuery();

            if (rs.next()) {
                user = new User();
                user.setUserName(rs.getString("userName"));
                user.setPassWord(rs.getString("passWord"));
                user.setNickName(rs.getString("nickName"));
            }
        } catch (SQLException e) {
            e.printStackTrace();
            user = null;
        } finally {
            BaseDao.closeAll(rs,  pstmt, conn);
        }

        return user;
    }

}

3.entity包

a.User类

/**
 * 
 */
package com.Elastic.SystemDemo.ivy.entity;

import java.io.Serializable;

/**
 * 描述类的基本功能<br/>
 * <p>
 * <h3>具体功能发布描述</h3>
 * </p>
 * @author     Ivy
 * @version    1.0
 * @date 2016年6月12日 下午3:39:14
 * @copyright Elastic
 */
public class User implements Serializable{
    private String userName;
    private String passWord;
    private String nickName;
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    public String getPassWord() {
        return passWord;
    }
    public void setPassWord(String passWord) {
        this.passWord = passWord;
    }
    public String getNickName() {
        return nickName;
    }
    public void setNickName(String nickName) {
        this.nickName = nickName;
    }
    
}

4.control包

a.UserServlet 类

package com.Elastic.SystemDemo.ivy.control;

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;
import javax.servlet.http.HttpSession;

import com.Elastic.SystemDemo.ivy.entity.User;
import com.Elastic.SystemDemo.ivy.service.UserService;
import com.Elastic.SystemDemo.ivy.service.impl.UserServiceImpl;

/**
 * Servlet implementation class UserServlet
 */
public class UserServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public UserServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取表单提交的内容
        String userName = request.getParameter("userName");
        String passWord = request.getParameter("passWord");
        
        //创建业务对象
        UserService userService = new UserServiceImpl();
        User user = userService.login(userName, passWord);
        String msg = "";
        boolean success;
        String data = "";
        
        if (null == user) {
            success = false;
            msg = "登录失败！";
        } else {
            success = true;
            
            //保存登录信息到session中
            HttpSession session = request.getSession();
            session.setAttribute("loginUser", user);
            msg = "登录成功！";
            
            //键值对
            data = "{"userName" : " " + user.getUserName() + " "}";
        }
        
        //响应Ajax请求的信息
        PrintWriter out = response.getWriter();
        //json对象
        out.write("{"success" : " + success + ","msg":"" + msg + "","data" : " + data + "}");
        //刷新
        out.flush();
        //关闭资源
        out.close();
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

b.SystemServlet 类

package com.Elastic.SystemDemo.ivy.control;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class SystemServlet
 */
public class SystemServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public SystemServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

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

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

}

5.filter包

a.EncodingFilter 类

/**
 * 
 */
package com.Elastic.SystemDemo.ivy.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;

/**
 * 描述类的基本功能<br/>
 * <p>
 * <h3>具体功能发布描述</h3>
 * </p>
 * @author     Ivy
 * @version    1.0
 * @date 2016年6月12日 下午4:14:39
 * @copyright Elastic
 */
public class EncodingFilter implements Filter{

    /* (non-Javadoc)
     * @see javax.servlet.Filter#destroy()
     */
    @Override
    public void destroy() {
        // TODO Auto-generated method stub
        
    }

    /* (non-Javadoc)
     * @see javax.servlet.Filter#doFilter(javax.servlet.ServletRequest, javax.servlet.ServletResponse, javax.servlet.FilterChain)
     */
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        chain.doFilter(request, response);
    }

    /* (non-Javadoc)
     * @see javax.servlet.Filter#init(javax.servlet.FilterConfig)
     */
    @Override
    public void init(FilterConfig arg0) throws ServletException {
        // TODO Auto-generated method stub
        
    }

}

6.service包

a.UserService类

/**
 * 
 */
package com.Elastic.SystemDemo.ivy.service;

import com.Elastic.SystemDemo.ivy.entity.User;

/**
 * 描述类的基本功能<br/>
 * <p>
 * <h3>具体功能发布描述</h3>
 * </p>
 * @author     Ivy
 * @version    1.0
 * @date 2016年6月12日 下午3:47:32
 * @copyright Elastic
 */
public interface UserService {
    User login(String userName, String passWord);
}

7.service.impl包

a.UserServiceImpl 类

/**
 * 
 */
package com.Elastic.SystemDemo.ivy.service.impl;

import com.Elastic.SystemDemo.ivy.dao.UserDao;
import com.Elastic.SystemDemo.ivy.dao.impl.UserDaoImpl;
import com.Elastic.SystemDemo.ivy.entity.User;
import com.Elastic.SystemDemo.ivy.service.UserService;

/**
 * 描述类的基本功能<br/>
 * <p>
 * <h3>具体功能发布描述</h3>
 * </p>
 * @author     Ivy
 * @version    1.0
 * @date 2016年6月12日 下午3:49:21
 * @copyright Elastic
 */
public class UserServiceImpl implements UserService {
    private UserDao userDao = new UserDaoImpl();
    
    /* (non-Javadoc)
     * @see com.Elastic.SystemDemo.ivy.service.UserService#login(java.lang.String, java.lang.String)
     */
    @Override
    public User login(String userName, String passWord) {
        User user = userDao.find(userName);
        if (null != user && user.getPassWord().equals(passWord)) {
//            密码设为null，不记录passWord
            user.setPassWord(null);
            return user;
        }
        return null;
    }

}

8.jsp文件

a.nav-top.jsp

<%-- 引入JSP页面PAGE指令 --%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 引入JSTL标签指令 --%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<c:if test="${empty sessionScope.loginUser }">
    <ul class="list-inline pull-right">
        <li><a href="javascript:;" data-toggle="show-login">登录</a></li>
        <li><a href="javascript:;" data-toggle="reg">注册</a></li>
    </ul>
</c:if>

<c:if test="${not empty sessionScope.loginUser }">
    <ul class="list-inline pull-right">
        <li><a href="javascript:;" >${sessionScope.loginUser.nickName}</a></li>
        <li><a href="javascript:;" data-toggle="logout">退出</a></li>
    </ul>
</c:if>

b.login.jsp

<%-- 引入JSP页面PAGE指令 --%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 引入JSTL标签指令 --%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!-- 局部页面 -->
<div class="panel panel-default" style="300px;">
    <div class="panel panel-heading">登录</div>
    <div class="panel panel-body">
        <form action="" class="form-horizontal" id="login-form">
            <div class="form-group">
                <label for="userName" class="col-md-3 control-label">账号：</label>
                <div class="col-md-9">
                    <input class="form-control" id="userName" name="userName" type="text" autocomplete="off"/>
                </div>
                <div class="col-md-12"></div>
            </div>
            <div class="form-group">
                <label for="passWord" class="col-md-3 control-label">密码：</label>
                <div class="col-md-9">
                    <input class="form-control" id="passWord" name="passWord" type="password" autocomplete="off"/>
                </div>
                <div class="col-md-12"></div>
            </div>
            <div class="form-group">
                <a class="btn btn-primary btn-block" data-toggle="login">登录</a>
            </div>
            <div class="form-group" class="text-center">
                 
            </div>
        </form>
    </div>
    
</div>

<script type="text/javascript">
    $(function() {
        $('a[data-toggle="login"]').on('click',function(){
            $.ajax({
                url : '<%=request.getContextPath() %>/user/login',
                type : 'post',
                dataType : 'json',
                data : $('#login-form').serialize(),
                beforeSend : function () {
                    //return false;
                    var userName = $('#userName').val();
                    if ('' == userName) {
                        //alert('用户名不为空');
                        $('#userName').parent().next().html('账户不能为空');
                        return false;
                    } else {
                        $('#userName').parent().next().html('');
                    }
                    
                    var passWord = $('#passWord').val();
                    if ('' == passWord) {
                        //alert('密码不为空');
                        $('#passWord').parent().next().html('密码不能为空');
                        return false;
                    } else {
                        $('#passWord').parent().next().html('');
                    }
                },
                success : function (result) {
                    console.log(result);
                    if (result.success) {
                        $('a[data-toggle="show-login"]').trigger('click');
                        //$('#nav-top').html(result.data.userName);
                        $('#nav-top').load('nav-top.jsp'); 
                    }
                },
                error : function() {
                    //alert('服务器异常！');    
                    $('#login-form').children().last().html('服务器异常！');
                }
            });
        });
    });
</script>    
    
    

c.index.jsp

<%-- 引入JSP页面PAGE指令 --%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 引入JSTL标签指令 --%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html language="zh-CN">
<head>
    <meta charset="utf-8">
    <!-- 设置浏览器渲染的引擎  -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- 设置支持移动设备  -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- 引用bootstrap样式 -->
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid">
        <div class="container" id="nav-top">
            <!-- <ul class="list-unstyle pull-right">
                <li><a href="javascript:;" data-toggle="show-login">登录</a></li>
                <li><a href="javascript:;" data-toggle="reg">注册</a></li>
            </ul> -->
            <jsp:include page="nav-top.jsp" flush="true"></jsp:include>
        </div>
    </div>
    
    <!-- 引用外部JS文件  -->
    <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-2.2.4.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath() %>/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /* nav-top.jsp里面的登录，注册，退出 */
            $('#nav-top').on('click','a[data-toggle="logout"]',function(){
                $.ajax({
                    /* Servlet虚拟路径 */
                    url : '<%=request.getContextPath() %>/user/logout',
                    success : function(result) {
                        $('#nav-top').load('nav-top.jsp');
                    }
                });
            });    
            
            $('#nav-top').on('click','a[data-toggle="show-login"]',function(){
                
                var isShow = $(this).data('show');
                if(isShow){
                    $(this).data('showContent').remove();
                    $(this).data('show',false);
                    return; 
                }
                
                //创建一个浮动的登录层
                var $div = $('<div id="ajax-login" class=""></div>');
                $(this).data('show',true);
                $(this).data('showContent',$div);
                
                $div.css({
                    'position' : 'absolute',
                    'z-index' : '99',
                    'width' : '300px',
                    'height' : '300px',
                    
                    'top' : ($(document).width - 300) / 2 + 'px',
                    'left' : ($(document).height - 300) / 2 + 'px'
                });
                
                $div.load('login.jsp');
                $('body').append($div);
                
            });                        
        });        
    </script>
</body>
</html>