使用javascript實現使用者名稱驗證

javascript是一種客戶端指令碼語言，它的執行是在客戶端的，有時候使用javascript可以大大減少伺服器的壓力。下面我介紹一些如何使用javascript實現與伺服器的非同步互動(頁面無重新整理)。首先宣告，使用純javascript實現與伺服器的非同步互動程式碼複雜且不穩定，現在一般很少有人用javascript來做這個工作，一般都是採用Ajax框架，例如Jquery 程式碼簡單，而且很穩定，使用範圍廣，這裡我只是給大家介紹一下javascript實現非同步互動的底層實現。

html頁面程式碼：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>使用底層的XMLHttpRequest實現非同步資料互動</title> <script type="text/javascript" src="jslib/XMLHttpRequest.js"></script> </head> <body> <span>使用AJax技術校驗使用者名稱！請輸入您的使用者名稱：</span><br/>   <input type="text" id="username"/> <input type="button" id="btnCheck" value="校驗" οnclick="verify()"/>  <div id="result"></div> </body> </html>

XMLHttpRequest.js程式碼如下：

//使用者名稱校驗的方法。

//這個方法將使用XMLHttpRequest物件來進行AJAX的非同步資料互動

//定義一個全域性的XMLHttpRequest物件

var xmlhttp;

function verify(){

//首先通過dom獲取使用者名稱

var username=document.getElementById("username").value;

//1.建立XMLHttpRequest物件

//這是XMLHttpRequest物件內部使用中最複雜的一步。

//需要針對IE和其他型別的瀏覽器建立這個物件的不同方式寫不同的程式碼。

if(window.XmlHttpRequest){

//這對FireFox,Mozillar,Opera,Safari,IE7,IE8

xmlhttp = new XMLHttpRequest();

//針對某些特定版本的mozillar瀏覽器的BUG進行修正

if(xmlhttp.overrideMimeType){

xmlhttp.overrideMimeType("text/xml");

}

}else if(window.ActiveXObject){

//針對IE6,IE5.5,IE5

//兩個可以用於建立XMLHttpRequest物件的控制元件名稱，儲存在一個js陣列中

//排在前面的版本較新

var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];

for(var i = 0 ; i < activexName.length;i++){

try{

//取出一個控制元件名進行建立，如果建立成功就終止迴圈

//如果建立失敗，回丟擲異常，然後可以繼續虛幻，繼續嘗試建立。

xmlhttp = new ActiveXObject(activexName[i]);

break;

}catch(e){

}

//確認XMLHttpRequest物件建立成功 , xmlhttprequest物件建立成功時 readyState的值為0

if(!xmlhttp){

alert("XMLHttpRequest物件建立失敗");

//這裡我個人發現最新版本的FireFox不能被ifelseif截獲，所以為了方便FireBuy除錯，手動new了一個物件，實踐發現可以成功！

xmlhttp=new XMLHttpRequest();

}else{

alert(xmlhttp);

}

//2.註冊回撥函式

//註冊回撥函式時，只需要函式名，不需要括號。

//這裡只需要將回撥函式的函式名註冊，如果加上括號，就會把執行這個方法，把函式的返回值註冊。

xmlhttp.onreadystatechange = callback; //每次請求狀態readystate的值改變時都會呼叫callback函式。

//GET方法

//3.設定連線資訊

//第一個參數列示http請求方式,支援所有http請求方式，主要使用get和post

//第二個參數列示請求的url地址，get方式請求的引數也在url中

//第三個參數列示是否採用非同步方式互動，true表示使用非同步互動，false表示使用同步互動

//第四個是使用者名稱，第五個是密碼。可以不寫

//xmlhttp.open("GET","AJAXService?name="+username,true); //呼叫open方法時，readyState的值變為1

//4.傳送資料，開始和伺服器端進行互動。

//如果是同步互動，send這句話會在伺服器端資料回來後才執行完(中間不幹事)

//如果是非同步互動，send這句話會立即執行完，然後可以執行其他操作。

//xmlhttp.send(null); //括號的引數為傳送的資料，我們的資料在url裡，所以不要傳了。 //此時readyState的值變為2

//POST方式

//使用POST方式請求的程式碼

xmlhttp.open("POST","AJAXService",true);

//不同的是，POST方式需要自己手動設定請求頭：

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//使用POST方式傳送資料,方式如下，只是將get方式傳值中url的後部分內容寫到send方法裡。

xmlhttp.send("name="+username);

}

//回撥函式 readyState的值每次被改變，callback方法都會被呼叫

function callback(){

//5.接收響應資料

//判斷物件的狀態是互動完成。一共有五種狀態值為0-4

if(xmlhttp.readyState ==4){

//判斷http的互動是否成功。成功的互動狀態為200,未找到頁面為404

if(xmlhttp.status == 200){

//獲取伺服器端返回的資料

//獲取伺服器輸出的純文字資料

var responseText = xmlhttp.responseText;

//將資料顯示在頁面上

var divnode = document.getElementById("result");

//設定元素節點的html內容

divnode.innerHTML = responseText;

}

//alert("此時readyState的值為："+xmlhttp.readyState);

}

後臺servlet的寫法：

package servlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.ServletException; import java.io.IOException; import java.io.PrintWriter; /** * Created by IntelliJ IDEA. * User: Administrator * Date: 2010-11-10 * Time: 23:09:49 * To change this template use File | Settings | File Templates. */ public class AJAXService extends HttpServlet { //快捷鍵，使用Ctrl+Alt+Space可以彈出供選擇的上下文提示 //快捷鍵，彈出選擇覆蓋方法 Alt+Insert @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //首先獲取資料 String name=request.getParameter("name"); PrintWriter out=response.getWriter(); //response.setContentType("text/html;charset=gb2312"); //response.setCharacterEncoding("gb2312"); //進行邏輯運算 if(name!=null&&!"".equals(name)){ if("kj".equals(name)){ //最後一步是傳資料到前臺。這是和傳統Servlet不同的一步。不是轉到一個新的頁面，而是傳遞運算結果給本頁面。 //雖然寫法一致，但是本質是不相同的，這是AJAX的實現。 out.println("the username["+name+"]is already used . please choose a new."); }else{ out.println("username["+name+"]can use"); } }else{ } out.println("使用者名稱不能為空"); out.close(); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } }

新鍵一個javaweb專案，分別加入這些檔案就可不熟執行，看到效果了。總的來說，使用javascript中的核心物件XMLHttpRequest實現與伺服器的非同步互動就是這樣的，但是這個太複雜，使用AJax的Jquery框架可以輕鬆實現，以後有機會給大家介紹。這裡僅供有興趣瞭解javascript底層實現的同僚參考。

使用javascript實現使用者名稱驗證

相關文章