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

kj619899271發表於2010-12-26
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/> <!--注意，使用AJax不需要使用表單來進行資料提交，所以不需要寫表單標籤--> <!--AJax應用必須要寫id名--> <input type="text" id="username"/> <input type="button" id="btnCheck" value="校驗" οnclick="verify()"/> <!--這個div使用者存放伺服器返回的資訊--> <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底層實現的同僚參考。

 


 

相關文章