封裝ajax支援get、post

標籤：end   pos   類型   obj   方式   atp   function   rip   內容類型   

為什麼要封裝ajax，因為……

for(var i=0;i<20;i++){

　　$.ajax(……)

}

的時候，整個頁面都卡死了，於是，我開始找答案。

後來，找到了，就是jquery的ajax屬於全域，當上文不執行完畢，其他的都動不了。於是乎有了封裝ajax，將ajax作為局部使用，即可解決掉。

 　　　　　　　function ajax(options) {                options = options || {};                options.type = (options.type || "GET").toUpperCase();                options.dataType = options.dataType || "json";                var params = formatParams(options.data);                var xhr;                //第一步                if (window.ActiveXObject) {//返回true為ie瀏覽器核心,否則不是ie核心                    //為ie核心建立傳輸對象的方式                     xhr = new window.ActiveXObject("Microsoft.XMLHTTP");                } else {                    //為非ie 核心瀏覽器建立傳輸對象的方式                    xhr = new XMLHttpRequest();                }                //接收 - 第三步                xhr.onreadystatechange = function () {                    if (xhr.readyState == 4) {                        var status = xhr.status;                        if (status >= 200 && status < 300) {                            options.success && options.success(xhr.responseText, xhr.responseXML);                        } else {                            options.error && options.error(status);                        }                    }                }                //串連 和 發送 - 第二步                if (options.type == "GET") {                    xhr.open("GET", options.url + "?" + params, true);                    xhr.send(null);                } else if (options.type == "POST") {                    xhr.open("POST", options.url, true);                    //設定表單提交時的內容類型                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                    xhr.send(params);                }            }            //格式化參數            function formatParams(data) {                var arr = [];                for (var name in data) {                    arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));                }                arr.push(("v=" + Math.random()).replace(".", ""));                return arr.join("&");            }

　　還有一個精簡後的

function ajax(opt) {        opt = opt || {};         opt.method = opt.method.toUpperCase() || ‘POST‘;         opt.url = opt.url || ‘‘;         opt.async = opt.async || true;         opt.data = opt.data || null;        opt.success = opt.success || function () {};         var xmlHttp = null;         if (XMLHttpRequest) {             xmlHttp = new XMLHttpRequest();         }         else {             xmlHttp = new ActiveXObject(‘Microsoft.XMLHTTP‘);         }var params = [];         for (var key in opt.data){             params.push(key + ‘=‘ + opt.data[key]);         }         var postData = params.join(‘&‘);         if (opt.method.toUpperCase() === ‘POST‘) {             xmlHttp.open(opt.method, opt.url, opt.async);             xmlHttp.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded;charset=utf-8‘);             xmlHttp.send(postData);         }         else if (opt.method.toUpperCase() === ‘GET‘) {             xmlHttp.open(opt.method, opt.url + ‘?‘ + postData, opt.async);             xmlHttp.send(null);         }         xmlHttp.onreadystatechange = function () {             if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {                 opt.success(xmlHttp.responseText);             }         };     }

　　但是呢，如果用慣了jq的，我們其實也可以這樣封裝

function ajax(){   var ajaxData = {     type:arguments[0].type || "GET",     url:arguments[0].url || "",     async:arguments[0].async || "true",     data:arguments[0].data || null,     dataType:arguments[0].dataType || "text",     contentType:arguments[0].contentType || "application/x-www-form-urlencoded",     beforeSend:arguments[0].beforeSend || function(){},     success:arguments[0].success || function(){},     error:arguments[0].error || function(){}   }   ajaxData.beforeSend()   var xhr = createxmlHttpRequest();    xhr.responseType=ajaxData.dataType;   xhr.open(ajaxData.type,ajaxData.url,ajaxData.async);    xhr.setRequestHeader("Content-Type",ajaxData.contentType);    xhr.send(convertData(ajaxData.data));    xhr.onreadystatechange = function() {      if (xhr.readyState == 4) {        if(xhr.status == 200){         ajaxData.success(xhr.response)       }else{         ajaxData.error()       }      }   }  }   function createxmlHttpRequest() {    if (window.ActiveXObject) {      return new ActiveXObject("Microsoft.XMLHTTP");    } else if (window.XMLHttpRequest) {      return new XMLHttpRequest();    }  }   function convertData(data){   if( typeof data === ‘object‘ ){     var convertResult = "" ;      for(var c in data){        convertResult+= c + "=" + data[c] + "&";      }      convertResult=convertResult.substring(0,convertResult.length-1)     return convertResult;   }else{     return data;   } }

　　調用方法就很簡單了，看看需要的參數就知道了。

封裝ajax支援get、post