類比jQuery簡單封裝ajax

標籤：介面   沒有   成功   header   color   path   對象   www   eof   

 1 /*類比jQuery的寫法 (簡單寫法)*/ 2 var $={}; 3 /*ajax*/ 4 $.ajax = function (options) { 5     /* 6     * 請求 7     * 1.請求介面    type    get post 預設的是get 決定是否佈建要求頭 8     * 2.介面地址    url     不確定 字串 如果使用者沒有傳  預設的介面地址為當前路徑 9     * 3.是否是非同步  async    預設的就是非同步 true;false 是同步請求10     * 4.提交資料    data    預設的是對象 {name:‘XXX‘,age:‘19‘} 預設是{}11     *12     * 響應13     * 1.成功回呼函數 success 代表的是一個函數 用來處理成功之後的商務邏輯的函數14     * 1.1 字串 xml json格式的字串 資料轉換15     * 2.失敗回呼函數 error 代表的是一個函數 用來處理失敗之後的商務邏輯的函數16     * 2.1 返回一些錯誤資訊17     * */18 19 20 21 22     /*處理預設參數*/23     if(!options || typeof options != ‘object‘) return false;24     /*如果沒有傳 使用預設的get方式提交*/25     var type = options.type || ‘get‘;26     /*如果沒有傳 使用預設的當前路徑*/27     var url = options.url || location.pathname;28     /*強制 是false的時候就是同步  否則都是非同步*/29     var async = options.async === false?false:true;30     /*如果沒有就是Null 物件*/31     var data = options.data || {};32     /*對象是無法進行傳輸 {name:‘‘,age:‘‘}  拼接字串  name=xzz&age=18*/33     var dataStr = ‘‘;34     for(var key in data){35         dataStr+=key+‘=‘+data[key]+‘$‘;36     }37     dataStr = dataStr && dataStr.slice(0,-1);38 39     /*ajax封裝編程*/40     /*初始化*/41     var xhr = new XMLHttpRequest();42     xhr.open(type,type == ‘get‘?url+‘?‘+dataStr:url,async);43     /*要求標頭*/44     if(type == ‘post‘){45         xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);46     }47     /*請求主體*/48     xhr.send(type==‘get‘?null:dataStr);49 50 51 52     /*響應*/53     xhr.onreadystatechange = function () {54         /*一定要完全完成通訊*/55         if(xhr.readyState == 4){56             if(xhr.status == 200){57                 /*請求成功*/58                 /*字串 xml josn格式的字串  資料轉換*/59                 /*擷取響應類型*/60                 var contentType = xhr.getResponseHeader("Content-Type");61                 var result = null;62 63                 if(contentType.indexOf(‘xml‘)>-1){64                     /*xml*/65                     result = xhr.responseXML;66                 }else if(contentType.indexOf(‘json‘)>-1){67                     /*json*/68                     result = JSON.parse(xhr.responseText);69                 }else{70                     /*string*/71                     result = xhr.responseText;72                 }73                 options.success && options.success(result);74 75             }else{76                 /*請求失敗*/77                 options.error && options.error({status:xhr.status,statusText:xhr.statusText});78             }79         }80     }81 };82 83 /*get*/84 $.get = function (options) {85     options.type = ‘get‘;86     $.ajax(options);87 }88 /*post*/89 $.get = function (options) {90     options.type = ‘post‘;91     $.ajax(options);92 }

註：簡單寫法，僅供參考。

類比jQuery簡單封裝ajax