【java項目實踐】詳解Ajax工作原理以及實現異步驗證用戶名是否存在+源碼下載(java版)

一年前，從不知道Ajax是什麼，伴隨着不斷的積累，到現在經常使用，逐漸有了深入的認識。今天，如果想開發一個更加人性化，友好，無刷新，交互性更強的網頁，那您的目標一定是Ajax。

 

介紹

 

      在詳細討論Ajax是什麼之前，先讓我們花一分鐘瞭解一下Ajax做什麼。如圖所示：

 

      

      

       如上圖展示給我們的就是使用Ajax技術實現的效果。伴隨着web應用的越來越強大而出現的是等待，等待服務器響應，等待瀏覽器刷新，等待請求返回和生成新的頁面成爲了程序員們的最最頭疼的難題。隨着Ajax的出現使web應用程序變得更完善，更友好。

      好，還等什麼呢？讓我們來一起看看Ajax的強大功能。

1、什麼是Ajax

 

      Ajax的全稱是：Asynchronous  JavaScript  +  XML=異步 JavaScript + XML

     從Ajax的全稱我們可以看出，Ajax不是一個技術，它是幾種技術的結合體，每種技術都有其獨特之處，合在一起就成爲了功能強大的新技術，用於創建快速動態網頁的技術。因此，Ajax也有一個時髦的術語“舊貌換新顏”。

2、Ajax包括：

     1、HTML，用於建立web表單

     2、DOM，用於動態顯示和交互

     3、XML，使用XML做數據交互和操作

     4、XmlHttpRequest，進行異步數據接收

     5、JavaScript，將它們緊密的結合在一起

       相信您對上面的技術都很熟悉，最難是創建XMLHttpRequest對象，大家看我的一篇博文就好，裏面詳細介紹了它是什麼，以及五步創建法，猛戳這裏。

     

Ajax工作原理

       我們通過兩張圖以往傳統的Web應用程序和使用Ajax應用程序的原理圖，來解釋一下Ajax的工作原理，如下圖所示：

       圖1是以往傳統的Web應用程序的原理圖，由客戶端向服務器提交頁面請求，再由服務器通過HTTP傳給客戶端生成瀏覽頁面。服務器端承擔大量的工作，客戶端只負責顯示。

       

                                                                                                          圖1.傳統的Web應用程序的原理圖

 

      圖2使用Ajax應用程序的工作原理如下圖，可見通過Ajax在瀏覽器與用戶交互方面有了很大改進，用戶不用爲提交Form表單而長時間等待服務器響應，提高用戶體驗度，而且通過Ajax也可以開發出更加華麗的Web交互頁面。客戶端界面和Ajax引擎都是在客戶端運行，這樣大量的服務器工作可以在Ajax引擎處實現，減輕了服務器端的負擔。

     

                                                                                                 圖2.使用Ajax應用程序的原理圖

 

Ajax的優缺點：

Ajax給我們帶來的好處，大家都有切身體會，在這裏我只是簡單的講幾點：

 

優點：

 

       1.最大的一點是頁面無刷新，用戶的體驗度更好。

       2.異步與服務器交互，不需要打斷用戶操作，具有更快的響應能力。

       3.減輕服務器和帶寬的負擔，節約空間和成本，ajax是“按需取數據”，可以最大程度的減輕對服務器造成的負擔。

       4.基於標準化的並被廣泛應用的技術，不需要下載插件或者小程序。

             

Ajax具有很多的優點，正是這些優點也反應了它的缺點（當然這裏缺點可以克服）。

缺點：

       1.安全問題

       2.對搜索引擎的支持比較弱。

       3.破壞了程序的異常處理機制。

       4.違背了url和資源定位的初衷。

實戰

一個簡單，但非常實用的例子：java版異步驗證用戶名是否存在

先給大家看一下實現的效果，下面給大家用代碼實現：

            

          

JS部分的代碼：

<script type="text/javascript">
    var xmlHttp;

    function createXMLHttpRequest() {
        //表示當前瀏覽器不是ie,如ns,firefox
        if(window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }

    function validate(field) {
        if (trim(field.value).length != 0) {
            //創建Ajax核心對象XMLHttpRequest
            createXMLHttpRequest();

            var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime();

            //設置請求方式爲GET，設置請求的URL，設置爲異步提交
            xmlHttp.open("GET", url, true);

            //將方法地址複製給onreadystatechange屬性
            //類似於電話號碼
            xmlHttp.onreadystatechange=callback;

            //將設置信息發送到Ajax引擎
            xmlHttp.send(null);
        } else {
            document.getElementById("spanUserId").innerHTML = "";
        }
    }
    //回調函數
    function callback() {

        //Ajax引擎狀態爲成功
        if (xmlHttp.readyState == 4) {
            //HTTP協議狀態爲成功
            if (xmlHttp.status == 200) {
                if (trim(xmlHttp.responseText) != "") {
                    document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>"
                }else {
                    document.getElementById("spanUserId").innerHTML = "";
                }
            }else {
                alert("請求失敗，錯誤碼=" + xmlHttp.status);
            }
        }
    }
</script>

提交到user_validate.jsp頁面的代碼：

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<%@ page import="sysmgr.manager.*" %>

<%
    String userId = request.getParameter("userId");
    if (UserManager.getInstance().findUserById(userId) != null) {
        out.println("用戶代碼[" + userId + "]已經存在!");
    }
%>

訪問數據庫部分的代碼，我們就不再這裏展示了，大家可以到查看源碼。

總結

       Web開發一直在追求界面友好，人性化，較高的用戶體驗度以及更加美觀等等，我相信只要從點點滴滴做起，任何問題都不是問題。