Ajax實現步驟和原理

1.獲取ajax異步對象

     IE4~IE12 : 使用new ActiveXObject("microsoft.xmlhttp");

     非IE ： 使用new XMLHttpRequest();

2.ajax.open(method,url);

     method是提交方式  有 get和post兩種

     url是提交路徑

3.ajax.send()

4.ajax.onreadystatechange 這是一個監聽函數

     包括五中狀態碼：

          0—ajax異步對象建立完畢，可是還未發送

          1—ajax已經調用了open()方法，可是還未調用send()方法

          2—已經調用send(),可是還未到達服務器端

          3—表示請求已經到達服務端，正在服務端的處理，可是還未響應返回

          4—ajax已經徹底接收了服務器的響應信息，可是狀態碼未必是正確的

                   狀態碼有：

                                        200：正確

                                       404/500：錯誤

                                                   ps：a. 每一個瀏覽器的0，1,2,3這四種狀態顯示的不同，可是4這個狀態碼每

                                                           個瀏覽器都 有，因此咱們只須要使用4便可

                                                           b.  0.1.2.3.4是ajax中的響應碼，200/404/500是web中的狀態碼

5.ajax.readyState == 4

6.ajax.status == 200;

7.獲取值  ajax.requestText或者ajax.requestXML

例1get：

   
   
   
   

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

   
   
   
   
<script type="text/javascript"> //定位文本框，同時提供焦點失去事件 document.getElementById("usernameID").onblur = function(){ //獲取文本框中輸入的值 var username = this.value; //若是用戶沒有填內容 if(username.length == 0){ //提示  document.getElementById("resID").innerHTML = "用戶名必填"; }else{ //對漢字進行UTF-8(U8)的編碼 username = encodeURI(username); //NO1) var ajax = createAJAX(); //NO2) var method = "GET"; var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime()+"&username=" + username; ajax.open(method,url); //NO3) ajax.send(null);  //--------------------------------------------------------等待  //NO4) ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status == 200){ //NO5) var tip = ajax.responseText; //NO6) document.getElementById("resID").innerHTML = tip; } } } } } </script>

例2：post

   
   
   
   

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

   
   
   
   
<script type="text/javascript"> document.getElementById("usernameID").onblur = function(){ var username = this.value;//傑克 //NO1) var ajax = createAJAX(); //NO2) var method = "POST"; var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime(); ajax.open(method,url); //設置AJAX請求頭爲POST，他會將請求體中的漢字自動進行UTF-8的編碼 ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); //NO3) var content = "username=" + username; ajax.send(content);   //===========================================等待   //NO4) ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status == 200){ //NO5) var tip = ajax.responseText;  //NO6) //建立img標籤 var imgElement = document.createElement("img"); //設置img標籤的src/width/height的屬性值 imgElement.src = tip; imgElement.style.width = "12px"; imgElement.style.height = "12px"; //定位span標籤 var spanElement = document.getElementById("resID"); //清空span標籤中的內容 spanElement.innerHTML = ""; //將img標籤加入到span標籤中 spanElement.appendChild(imgElement); } } } } </script>

來自爲知筆記(Wiz)