JavaWeb之Ajax

時間  2019-11-18
標籤 javaweb ajax 欄目 Java 简体版
原文   原文鏈接

1、什麼是Ajax　　

　　1.一、Ajax的定義

　　Ajax：（Asynchronous JavaScript And XML）指異步 JavaScript 及 XML
　　不是一種新的編程語言，而是一種用於建立更好更快以及交互性更強的 Web 應用程序的技術，是基於JavaScript、XML、HTML、CSS新用法。javascript

　　Ajax：只刷新局部頁面的技術
　　JavaScript：更新局部的網頁
　　XML：通常用於請求數據和響應數據的封裝
　　XMLHttpRequest對象：發送請求到服務器並得到返回結果
　　CSS：美化頁面樣式
　　異步：發送請求後不等返回結果，由回調函數處理結果html

　　1.二、Ajax交互模型

　　　　

　　傳統Web交互方式——同步java

　　　　

　　AJAX支持Web交互方式——異步數據庫

　　　　

2、AJAX在google中的應用

　　2.一、Google Suggest

　　　　

　　2.二、Gmail　　

　　　　

　　2.三、Google Map

　　　　

3、XMLHttpRequest對象

　　JavaScript中XMLHttpRequest對象是整個Ajax技術的核心，它提供了異步發送請求的能力，編程

　　XMLHttpRequest 用於在後臺與服務器交換數據。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。數組

　　3.一、構造方法

　　不一樣瀏覽器，甚至相同瀏覽器不一樣版本，獲取該對象的方式都有所不一樣。瀏覽器

　　爲了應對全部的現代瀏覽器，包括 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.二、經常使用方法　　　　

方法名異步

說    明jsp

open(method,URL,async)

創建與服務器的鏈接

method參數指定請求的HTTP方法,典型的值是GET或POST

URL參數指請求的地址

async參數指定是否使用異步請求，其值爲true或false

send(content)

發送請求

content參數指定請求的參數

setRequestHeader(header,value)

設置請求的頭信息 

　　3.三、經常使用的屬性

　　　　3.3.一、readyState（short類型，只讀）: XMLHttpRequest的狀態信息　

就緒狀態碼

說    明

0

XMLHttpRequest對象沒有完成初始化

即：剛剛建立。

1

XMLHttpRequest對象開始發送請求

調用了open方法，但尚未調用send方法。請求尚未發出

2

XMLHttpRequest對象的請求發送完成

send方法已經調用，數據已經提交到服務器，但沒有任何響應

3

XMLHttpRequest對象開始讀取響應，尚未結束

收到了全部的響應消息頭，但正文尚未徹底收到

4

XMLHttpRequest對象讀取響應結束

一切都收到了

　　　　3.3.二、status（short類型，只讀）：HTTP的狀態碼　　

狀態碼

說    明

200

服務器響應正常

400

沒法找到請求的資源

403

沒有訪問權限

404

訪問的資源不存在

500

服務器內部錯誤

　　　　3.3.三、responseText（String類型，只讀）：得到響應的文本內容

　　　　3.3.四、responseXML（document類型，只讀）：得到響應的XML文檔對象 documednt

　　　　3.3.五、onreadystatechange：指定回調函數

　　　　當請求被髮送到服務器時，咱們須要執行一些基於響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。

　　　　readyState 屬性存有 XMLHttpRequest 的狀態信息。

注：就緒狀態是4並且狀態碼是200，才能夠處理服務器數據

　　3.四、實例

　　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(){
        //一、獲得XMLHttpRequest對象
        var req = getXMLHttpRequest();
        //alert(request);
        
    //四、處理響應結果
    req.onreadystatechange = function(){
        //alert(req.readyState);    //查看客戶端響應狀態
        if(req.readyState ==4){    
            if(req.status == 200){    //服務器響應一切正常
                alert(req.responseText);
            }
        }
        }
    //二、創建一個鏈接
    req.open("get", "${pageContext.request.contextPath }/servletDemo1");
    //三、發送請求
    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

 4、驗證用戶名是否存在

　　首先須要創建一個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

 5、實驗練習AJAX之搜索框（與數據庫交互）

　　5.一、結果：當咱們使用百度或者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
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程