原生ajax

原生ajax

原創

2020-02-22 20:46

1.創建XMLHTTPRequest

function createXMLHTTPRequest() {     
                 //1.創建XMLHttpRequest對象     
                 //這是XMLHttpReuquest對象無部使用中最複雜的一步     
                 //需要針對IE和其他類型的瀏覽器建立這個對象的不同方式寫不同的代碼     
                 var xmlHttpRequest;  
                 if (window.XMLHttpRequest) {     
                     //針對FireFox，Mozillar，Opera，Safari，IE7，IE8     
                    xmlHttpRequest = new XMLHttpRequest();     
                     //針對某些特定版本的mozillar瀏覽器的BUG進行修正     
                     if (xmlHttpRequest.overrideMimeType) {     
                         xmlHttpRequest.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 {     
                             //取出一個控件名進行創建，如果創建成功就終止循環     
                             //如果創建失敗，回拋出異常，然後可以繼續循環，繼續嘗試創建     
                            xmlHttpRequest = new ActiveXObject(activexName[i]);   
                            if(xmlHttpRequest){  
                                break;  
                            }  
                         } catch (e) {     
                         }     
                     }     
                 }     
                 return xmlHttpRequest;  
             }

下面這種簡單一點

function creatXMLHTTPRequest(){
      var XHR=null;  
      if (window.XMLHttpRequest) {  
             // 非IE內核  
             XHR = new XMLHttpRequest();  
     } else if (window.ActiveXObject) {  
             // IE內核,這裏早期IE的版本寫法不同,具體可以查詢下  
             XHR = new ActiveXObject("Microsoft.XMLHTTP");  
     } else {  
             XHR = null;  
     }  
     return XHR;
}

2.get請求

function get(){  
    var req = createXMLHTTPRequest();  
    if(req){  
        req.open("GET", "http://test.com/?keywords=手機", true);  
        req.onreadystatechange = function(){  
            if(req.readyState == 4){  
                if(req.status == 200){  
                    alert("success");  
                }else{  
                    alert("error");  
                }  
            }  
        }  
        req.send(null);  
    }  
}

3.post請求

  function post(){  
    var req = createXMLHTTPRequest();  
    if(req){  
        req.open("POST", "http://test.com/", true);  
        req.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gbk;");    //需要設置頭 
        req.send("keywords=手機");  //需要傳送數據
        req.onreadystatechange = function(){  
            if(req.readyState == 4){  
                if(req.status == 200){  
                    alert("success");  
                }else{  
                    alert("error");  
                }  
            }  
        }  
    }  
}

readyState與status:
readyState有五種狀態：
　　0 (未初始化)： (XMLHttpRequest)對象已經創建，但還沒有調用open()方法；
　　1 (載入)：已經調用open() 方法，但尚未發送請求；
　　2 (載入完成)：請求已經發送完成；
　　3 (交互)：可以接收到部分響應數據；
　　4 (完成)：已經接收到了全部數據，並且連接已經關閉。
如此一來，你應該就能明白readyState的功能，而status實際是一種輔狀態判斷，只是status更多是服務器方的狀態判斷。關於status，由於它的狀態有幾十種，我只列出平時常用的幾種：
　　100——客戶必須繼續發出請求
　　101——客戶要求服務器根據請求轉換HTTP協議版本
　　200——成功
　　201——提示知道新文件的URL
　　300——請求的資源可在多處得到
　　301——刪除請求數據
　　404——沒有發現文件、查詢或URl
　　500——服務器產生內部錯誤