JavaWeb之Ajax

本文轉載自查看原文 2017-03-13 14:00 4077 JavaWeb

一、什么是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; width: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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JavaWeb 之 AJAX JavaWeb學習之Ajax javaweb基礎----使用jquery的ajax JavaWeb-----------Ajax頁面局部刷新(二) javaweb使用ajax實現文件上傳 JavaWeb-----------Ajax頁面局部刷新(一) javaweb基礎----使用ajax校驗用戶名是否重復 javaweb+servlet+mysql+ajax+json+echarts簡單實例 JavaWeb項目中使用ajax上傳文件 JavaWeb_Ajax通過JQuery和原生js異步傳輸數據