網站開發基礎知識篇三 Ajax

   Ajax,(Asynchronous  Javascript  And   XmL),可以實現在不刷新整個網頁的情況下對頁面進行局部操作。

   比如在註冊信息的時候,當用戶填寫完用戶名後,可以立即對該用戶名進行校驗,而不必等待頁面提交之後才進行。

   好了,下面寫具體的代碼。

   首先編寫一個簡單的註冊頁面。

   <body>

   <input type = "text" id = "userNameId" placeholder = "請輸入用戶名" onblur = "checkName()"/><span id = "showNameId"></span>

   </body>

   然後寫checkName()方法。

   <head>

    <script type = "text/javascript">

     function checkName(){

      /*1.實例化xml對象

       *XMLHttpRequest對象可以幫助實現在不刷新整個頁面的情況下交換數據,我對這個對象是如何實現的很感興趣,以後會研究現在用它就好了。

       */

      var xmlhttp = new XMLHttpRequest();

      //2.設置監聽器

      xmlhttp.onreadystatechange = function(){

      //這裏接受從頁面返回的信息,並進行處理。

      /*5種狀態

        * 0:沒有建立連接

        * 1:請求已經建立但還沒有發出

        * 2:請求已經發出,正在處理

        * 3:請求已經出來,服務器還沒響應

        * 4:響應已完成,可以訪問服務器兵使用它

        */          

        if(xmlhttp.readyState == 4)

          var data = xmlhttp.responseText;

          //接下來就是處理了

          if(data == fail)

          document.getElementById("showNameId").InnerHTML = "<font>用戶名重複</font>"

     }

     /*3.打開通道建立連接

      *value爲任意類型數據,這裏爲用戶名。

      *第三個參數爲boolean類型,如果爲true,則異步執行表示腳本會在send方法之後繼續執行,不必等待瀏覽器的響應。

      *如果爲false,則表示失敗對其他代碼無影響不過這種情況很少見。一般用true

      */

     xmlhttp.open("OneServlet","value",true);

     //4.設置請求頭部信息

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

     //5.發送數據

     var userNameValue = document.getElementById("userNameId").value;

     xmlhttp.send("userName="+userNameValue);

   }

    </script>

   </head>


   然後建立Servlet進行處理。使用request.getParamater("userName")來接值,然後去數據庫中比對。

   使用PrintWriter writer = response.getWriter();

           writer.print("success or fail");來傳回值。在監聽器中處理成功或者失敗的狀況

 

 


  

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章