【java項目實踐】詳解Ajax工作原理以及實現非同步驗證使用者名稱是否存在+源碼下載(java版)，javaajax

【java項目實踐】詳解Ajax工作原理以及實現非同步驗證使用者名稱是否存在+源碼下載(java版)，javaajax

      一年前，從不知道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,firefoxif(window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest();} else if (window.ActiveXObject) {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}}function validate(field) {if (trim(field.value).length != 0) {//建立Ajax核心對象XMLHttpRequestcreateXMLHttpRequest();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開發一直在追求介面友好，人性化，較高的使用者體驗度以及更加美觀等等，我相信只要從點點滴滴做起，任何問題都不是問題。

AJAX非同步表單驗證使用者名稱是否存在

前提：知道配置AJAX。
要寫一個java類，再寫一個方法，接收“使用者”對象或使用者名稱（字串類型），再調用dao層（後台）代碼判斷，至於dao層代碼怎麼寫你應該知道，然後返回判斷結果，在JSP頁面得到返回的data，再次判斷。
推薦：百度一下原始碼或google一下
 
AJAX非同步表單驗證使用者名稱是否存在(jsp+sevlet實現)

$(function(){

$("#txtEmail").blur(function(){
//檢查是否為空白
var myreg = /(\S)+[@]{1}(\S)+[.]{1}(\w)+/;
if($("#txtEmail").val()==""){
$("#email_info").css("color","red");
$("#email_info").text("郵箱為空白！");
return;
}else if(!myreg.test($("#txtEmail").val())){
$("#email_info").css("color","red");
$("#email_info").text("郵箱無效！");
return;
}
$("#email_info").text("正在檢測....");
//發送Ajax請求
$.post(
"valid!emailValid.action?dt="+new Date().getTime(),
{"email": $("#txtEmail").val()},
function(data){
//alert(data.ok);
if(data.ok){
//alert("......");
em=true;
$("#email_info").css("color","green");
$("#email_info").text("可以註冊！");
}else{
$("#email_info").css("color","red");
$("#email_info").text("已被註冊郵箱！");
em=false;

}
}
),
"json"
});
});

public String emailValid(){
UserDAO udao =(UserDAO) DaoFactory.getDaoinstance(UserDAO.class);
User user = udao.findByEmail(email);
if(user==null){
ok = true;
}else{
ok = false;
}
return "success";
}...餘下全文>>