JavaWeb之Ajax

一、什么是Ajax　　

　　1.1、Ajax的定义

　　Ajax：（Asynchronous JavaScript And XML）指异步 JavaScript 及 XML
　　不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS新用法。

　　Ajax：只刷新局部页面的技术
　　JavaScript：更新局部的网页
　　XML：一般用于请求数据和响应数据的封装
　　XMLHttpRequest对象：发送请求到服务器并获得返回结果
　　CSS：美化页面样式
　　异步：发送请求后不等返回结果，由回调函数处理结果

　　1.2、Ajax交互模型

　　传统Web交互方式——同步

　　AJAX支持Web交互方式——异步

二、AJAX在google中的应用

　　2.1、Google Suggest

　　2.2、Gmail　　

　　2.3、Google Map

三、XMLHttpRequest对象

　　JavaScript中XMLHttpRequest对象是整个Ajax技术的核心，它提供了异步发送请求的能力，

　　XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

　　3.1、构造方法

　　不同浏览器，甚至相同浏览器不同版本，获取该对象的方式都有所不同。

　　为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

1 var xmlhttp;
2 if (window.XMLHttpRequest)
3   {// code for IE7+, Firefox, Chrome, Opera, Safari
4   xmlhttp=new XMLHttpRequest();
5   }
6 else
7   {// code for IE6, IE5
8   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
9   }

　　3.2、常用方法　　　　

方法名	说明
open(method,URL,async)	建立与服务器的连接 method参数指定请求的HTTP方法,典型的值是GET或POST URL参数指请求的地址 async参数指定是否使用异步请求，其值为true或false
send(content)	发送请求 content参数指定请求的参数
setRequestHeader(header,value)	设置请求的头信息

　　3.3、常用的属性

　　　　3.3.1、readyState（short类型，只读）: XMLHttpRequest的状态信息　

就绪状态码	说明
0	XMLHttpRequest对象没有完成初始化即：刚刚创建。
1	XMLHttpRequest对象开始发送请求调用了open方法，但还没有调用send方法。请求还没有发出
2	XMLHttpRequest对象的请求发送完成 send方法已经调用，数据已经提交到服务器，但没有任何响应
3	XMLHttpRequest对象开始读取响应，还没有结束收到了所有的响应消息头，但正文还没有完全收到
4	XMLHttpRequest对象读取响应结束一切都收到了

　　　　3.3.2、status（short类型，只读）：HTTP的状态码　　

状态码	说明
200	服务器响应正常
400	无法找到请求的资源
403	没有访问权限
404	访问的资源不存在
500	服务器内部错误

　　　　3.3.3、responseText（String类型，只读）：获得响应的文本内容

　　　　3.3.4、responseXML（document类型，只读）：获得响应的XML文档对象 documednt

　　　　3.3.5、onreadystatechange：指定回调函数

　　　　当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。

　　　　readyState 属性存有 XMLHttpRequest 的状态信息。

注：就绪状态是4而且状态码是200，才可以处理服务器数据

　　3.4、实例

　　Myjs.js文件

function getXMLHttpRequest(){
    var xmlhttp;
     if (window.XMLHttpRequest)
       {// code for IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp=new XMLHttpRequest();
       }
     else
       {// code for IE6, IE5
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       }
    return xmlhttp;
}

View Code

　　test1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/Myjs.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    window.onload = function(){
        //1、得到XMLHttpRequest对象
        var req = getXMLHttpRequest();
        //alert(request);
        
    //4、处理响应结果
    req.onreadystatechange = function(){
        //alert(req.readyState);    //查看客户端响应状态
        if(req.readyState ==4){    
            if(req.status == 200){    //服务器响应一切正常
                alert(req.responseText);
            }
        }
        }
    //2、建立一个连接
    req.open("get", "${pageContext.request.contextPath }/servletDemo1");
    //3、发送请求
    req.send(null);
    }
    
</script>
</head>

View Code

ServletDemo.java

public class ServletDemo1 extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.print("hello meinv!");

View Code

四、验证用户名是否存在

　　首先需要建立一个Myjs.js为了获取XMLHttpRequest对象，上面那个例子已经有了，在这里就不重复了。

reg.jsp

用了两种方法第一种需要在input中加入onblur="ckName()"做焦点失去事件

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/myJS.js"></script>
<title>Insert title here</title>
    <script type="text/javascript">
/*         function ckName(){
            //获取用户名
            var name = document.getElementsByTagName("input")[0];
            //创建XMLHttpRequest对象
            var xhr = getXMLHttpRequest();
            //处理结果
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4){//请求一切正常
                    if(xhr.status==200){//服务器响应一切正常
                        //alert(xhr.responseText);//得到响应结果
                        var msg = document.getElementById("msg");
                        if(xhr.responseText=="true"){
                            msg.innerHTML =  "<font color='red'>用户名已存在</font>";
                            //msg.innerText = "<font color='red'>用户名已存在</font>";
                        }else{
                            msg.innerHTML = "可以使用";
                        }
                    }
                }
            }
            
            //创建连接
            xhr.open("get","${pageContext.request.contextPath }/servlet/ckNameServlet?name="+name.value);
            //发送请求
            xhr.send(null);
        } */
        
        window.onload=function(){
            var nameElement = document.getElementsByName("userName")[0];
            nameElement.onblur = function(){
                var name = this.value;//this等价于nameElement
                //创建XMLHttpRequest对象
            var xhr = getXMLHttpRequest();
            //处理结果
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4){//请求一切正常
                    if(xhr.status==200){//服务器响应一切正常
                        //alert(xhr.responseText);//得到响应结果
                        var msg = document.getElementById("msg");
                        if(xhr.responseText=="true"){
                            msg.innerHTML =  "<font color='red'>用户名已存在</font>";
                            //msg.innerText = "<font color='red'>用户名已存在</font>";
                        }else{
                            msg.innerHTML = "可以使用";
                        }
                    }
                }
            }
            
            //创建连接
            xhr.open("get","${pageContext.request.contextPath }/servlet/ckNameServlet?name="+name);
            //发送请求
            xhr.send(null);
            }
            
        }
    </script>
</head>
<body>
        用户名：<input type="text" name="userName" /><span id="msg"></span><br/>
        密码<input type="password" name="pwd"/><br/>
</body>
</html>

View Code

CkNameServlet.java

PrintWriter out = response.getWriter();
        String name = request.getParameter("name");
        if("tom".equals(name)){
            out.print(true);
        }else{
            out.print(false);
        }
    }

View Code

五、实验练习AJAX之搜索框（与数据库交互）

　　5.1、结果：当我们使用百度或者google的时候，会发现当我们输入一个提示字后就会出来很多的下拉框提示，这个是通过什么做到局部刷新页面的呢。就是使用了AJAX技术

5.2代码：

　　search.jsp

<div id="divsearch">    //这个定义一个搜索框
    <form action="${pageContext.request.contextPath}/findProductBySearch"
        method="post">
        <table width="100%" border="0" cellspacing="0" >
            <tr>
                <td style="text-align:right; padding-right:220px">
                Search <input 
                    type="text" name="name" class="inputtable" 
                    id="name" autocomplete="on"/> <!-- 解决中文提交的问题 -->
                    <input type="image" src="images/serchbutton.gif"
                    border="0" style="margin-bottom:-4px">
                </td>
            </tr>
        </table>

    </form>
</div>
         //这是给下拉框定义的样式
    <div id="context1" style="display:block;border:1px solid red;background-color:white; 128px;position:absolute;left:860px;top:135px;">
        
    </div>

View Code

　　javascript中写的代码

<script type="text/javascript"
    src="${pageContext.request.contextPath}/js/my.js">
    
</script>
<script type="text/javascript">
    
    window.onload = function(){
        //得到搜索框对象
        var searchElement = document.getElementById("name");
        //得到DIV元素
        var div = document.getElementById("context1");
        
        searchElement.onkeyup = function(){//给文件框注册按键弹起事件
            //获取文本框的值
            var name = this.value;
            //如果文本框不没有数据时，把div隐藏，且不向服务器发送请求
            if(name==""){
                div.style.display="none";
                return;
            } 
            
            //获得xhr对象
            var xhr = getXMLHttpRequest();
            
            //处理结果
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4){//请求一 切正常
                    if(xhr.status==200){//服务器响应一切正常
                        var str = xhr.responseText;//得到服务器返回的数据
                    
                        var ss = str.split(","); // 把字符串 1001，1002，1003 截成数组
                        var childDivs = "";
                        //循环把数据放入小的div中
                        for(var i=0;i<ss.length;i++){
                            childDivs+="<div onclick='writeText(this)' onmouseover='changeBackground_over(this)' onmouseout='changeBackground_out(this)'>"+ss[i]+"</div>";//把数组中的每个元素放到div中
                        }
                        
                        div.innerHTML= childDivs;//把多个childDivs（div）放入列表div中
                        div.style.display="block";//把列表隐藏
                    }
                }
            }
            
            xhr.open("get","${pageContext.request.contextPath}/servlet/searchBookAJAXServlet?name="+name+"&time="+new Date().getTime());
            
            xhr.send(null);
        }
    }
    
    //鼠标悬浮时，改变背景色
    function changeBackground_over(div){
        div.style.backgroundColor = "gray";
    }
    //鼠标离开时，恢复背景色
    function changeBackground_out(div){
        div.style.backgroundColor = "";
    }
    
    //填充文本到搜索框
    function writeText(div){
        //得到搜索框
        var searchElement = document.getElementById("name");
        searchElement.value = div.innerHTML;//把div中的文本添加到搜索框中
        div.parentNode.style.display="none";//把context1的div隐藏
    }
</script>

View Code

　searchBookAJAXServlet

request.setCharacterEncoding("UTF-8");//只能解决post方式的乱码
        response.setContentType("text/html;charset=UTF-8");
        
        String name = request.getParameter("name");
        name = new String(name.getBytes("iso-8859-1"),"UTF-8");
        BookServiceImpl bs = new BookServiceImpl();
        List<Object> list = bs.searchBookByName(name);
        
        //把集合中的数据转换为字符串返回到网页
        String str = "";
        for (int i = 0; i < list.size(); i++) {
            if(i>0){
                str+=",";
            }
            str+=list.get(i);
        }
        
        System.out.println(str);
        //把数据响应到客户端
        response.getWriter().write(str);//str 1001,1002,1003

View Code

在serivce业务层中

public List<Object> searchBookByName(String name) {
        try {
            return bookDao.searchBookByName(name);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }

View Code

在DAO通过传过来的模糊字得到所有有联系的name

/**
     * 根据书名查找图书 模糊查询
     * @param name
     * @return
     * @throws SQLException
     */
    public List<Object> searchBookByName(String name) throws SQLException {
        QueryRunner qr = new QueryRunner(C3P0Util.getDataSource());
        return qr.query("select name from book where name like ?", new ColumnListHandler(),"%"+name+"%");
    }
}

View Code