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)