源生js封裝ajax

封裝源生ajax代碼:
   var data = {type: "get",url:"",data:null,async:true,success:null,error:null};
   function ajax(data){
//     第一步:創建XMLHttpRequest對象
       var xhr = null;
       if(window.XMLHttpRequest){  // 標準瀏覽器
           xhr = new XMLHttpRequest();
       }
       else{  // 早期的IE瀏覽器
           xhr = new ActiveXObject("Microsoft.XMLHTTP");
       }
//     定義一些參數
       var type = data.type == "get" ? "get" : "post";
       var async = data.type ? true : false;
//     第二步:準備發送請求,配置發送請求的一些行爲
       xhr.open(type,data.url,async);
//     第三步:執行發送的動作,如果是post,要設置請求頭
       if(type === "post"){
           xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
       }
       xhr.send(data.data);
//     第四步:指定一些回調函數
       xhr.onreadystatechange = function(){
//           xhr.readyState返回值:0   XMLHttpRequest 對象創建完成
//                                 1   初始化完成open,表示發送請求的動作準備好了,但是還沒有開始發送
//                                 2   發送請求end,表示已經發送完成
//                                 3   服務器已經返回數據了,正在接收數據
//                                 4   接收數據完成
           if(xhr.readyState == 4){
               if(xhr.status == 200){
                   if(typeof data.success == "function"){
//                       調用回調函數,傳入服務器返回的結果
                       data.success(xhr.responseText);
                   }
                   else if(typeof data.error == "function"){
                       data.error();
                   }
               }
           }
       }
//     調用
       ajax(data);

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