Ajax初體驗

這幾天學習Ajax,做了個小實驗程序。程序如下:(index.jsp)

<%@ page import="java.util.*" contentType="text/html; charset=utf-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   <title>用戶註冊</title>
  <script type="text/javascript">
  var xmlHttp = null;
  //創建XMLHttpRequest對象
  function createXMLHTTP() {
   //判斷瀏覽器是否支持ActiveX
   if (window.ActiveXObject) {
    var arrXmlHttpTypes = ["Microsoft.XMLHTTP", "MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP"];
    for (var i=0;i<arrXmlHttpTypes.length;i++){
     try{
      xmlHttp=new ActiveXObject(arrXmlHttpTypes[i]);
      break;
     }catch(ex){
     
     }
    }
   //判斷瀏覽器是否將XMLHttpRequest作爲本地對象實現
   }else if (window.XMLHttpRequest) {
    xmlHttp=new XMLHttpRequest();
   }
  }
  //響應XMLHttpRequest對象狀態變化的函數
  function httpStateChange(){
   var j=0;
   if(xmlHttp.readyState==4){   //表示異步調用完畢
    if(xmlHttp.status==200||xmlHttp.status==0){
     var userNames=xmlHttp.responseText;
     var arruserName=userNames.split(';');
     var bflag=false;
     for(j=0;j<arruserName.length;j++)
     {
      if(arruserName[j] == myform.username.value) {
       bflag=true;
       break;
      }
     }
     var node=document.getElementById("myDiv");
     if(bflag){
      node.firstChild.nodeValue="對不起,用戶名已經存在";
      myform.submitButton.disabled=true;
     }else{
      node.firstChild.nodeValue="恭喜你,用戶名可以使用";
      myform.submitButton.disabled=false;
     }
    }
   }
  }
        //驗證用戶名是否有效
  function checkName() {
   createXMLHTTP();
   if (xmlHttp != null){
    xmlHttp.onreadystatechange=httpStateChange;
    xmlHttp.open("get","userName.txt",true);
    xmlHttp.send(null);
   }else{
    alert("您的瀏覽器不支持XMLHTTP,請更換瀏覽器後在進行註冊。");
   }
  }

  </script>
  </head>
 
  <body>
    <p align="center"><b>用戶註冊</b></p>
    <form name="myform">
     用戶名:<input type="text" name="username" onblur="checkName()" >
     <span id="myDiv"">&nbsp;</span><br/>
     輸入登錄密碼:<input type="password" name="password1"> <br/>
     再次輸入密碼:<input type="password" name="password2"> <br/>
     <input type="button" value="提交" name="submitButton" disabled/>
    </form>
  </body>
</html>
userName.txt爲服務器端的文本文件,存放已註冊用戶名,用";"分割。例如:bush;obama

將以上兩個文件發不到服務器,用瀏覽器訪問即可。

Ajax使用流程:

1.創建XMLHttpRequest對象;

2.創建響應XMLHttpRequest對象狀態變化的函數;

3.創建HTTP請求;

4.發送HTTP請求;

5.判斷異步調用是否成功;

6.獲得服務器返回數據;

7.局部更新。

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