javascript原生ajax類

1. 代碼：

   /*
   @desc：ajax請求類
   @param obj 傳入數據，格式為
   {
   data:'name=lee&sex=male',           #  提交到后臺的數據，""|{}|FormData
   url:'http://localhost/test.php',    #  請求的url地址
   type:'post',                        #  請求類型，post|get|json|file
   async:true                          #  同步/異步，true:異步 false:同步，默認true
   }
   */
   function ajax(obj){
   this.obj = obj
   this.xhr
   this.data
   /*
    @desc：內部方法，查詢字符串轉json對象
    @param str 查詢字符串，格式為："a=b&c=d"
    @return json json對象，如：
    {
       a:"b",
       c:"d"
    }
    */
   this.strtojson = function(str){
       var arr = str.split('&')
       var json = {}
       for(var i in arr){
           var k = arr[i].split('=')[0]
           var v = arr[i].split('=')[1]
           json[k] = v
       }
       return json
   }
   /*
    @desc：內部方法，json對象轉查詢字符串
    @param json json對象，如：
    {
       a:"b",
       c:"d"
    }
    @return str 查詢字符串，格式為："a=b&c=d"
    */
   this.jsontostr = function(json){
       var arr = new Array()
       for(var k in json){
           var v = json[k]
           var val = k+'='+v
           arr.push(val)
       }
       var str = arr.join('&')
       return str
   }
   /*
    @desc：內部方法，解析url地址
    @param url url地址，如：http://www.baidu.com/a/b/c.jpg?a=b&c=d#id
    @return info 解析后的地址，如：
    {
       scheme:'http',          #  協議
       host:'www.baidu.com',   #  域名
       port:'',                #  端口
       user:'',                #  驗證用戶名
       pass:'',                #  驗證密碼
       path:a/b,               #  路徑
       query:'a=b&c=d',        #  查詢字符串
       fragment:'id'           #  錨點
    }
    */
   this.parseurl = function(url){
       var reg = /(?:([A-Za-z]+):)?(\/{0,3})?(?:(.*):(.*)@)?([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?/
       var res = reg.exec(url)
       var scheme = (res[1])?res[1]:'http'
       var user = (res[3])?res[3]:''
       var pass = (res[4])?res[4]:''
       var host = (res[5])?res[5]:''
       var port = (res[6])?res[6]:'80'
       var path = (res[7])?res[7]:''
       var query = (res[8])?res[8]:''
       var fragment = (res[9])?res[9]:''
       var info = {
           scheme:scheme,
           host:host,
           port:port,
           user:user,
           pass:pass,
           path:path,
           query:query,
           fragment:fragment
       }
       return info
   }
   /*
    @desc：初始化方法，獲得xhr實例
    */
   this.init = function(){
       if(window.XMLHttpRequest){
           this.xhr=new XMLHttpRequest()
       }else{
           this.xhr=new ActiveXObject("Microsoft.XMLHTTP")
       }
       return this
   }
   /*
    @desc：ajax發送前的回調
    */
   this.before = function(func){
       this.xhr.addEventListener('readystatechange',function(){
           if(this.readyState < 4){
               func()
           }
       })
       return this
   }
   /*
    @desc：ajax發送成功后的回調
    */
   this.success = function(func){
       this.xhr.addEventListener('readystatechange',function(){
           if (this.readyState == 4 && this.status == 200){
               var res
               if(this.getResponseHeader('content-type')==='application/json'){
                   res = JSON.parse(this.responseText)
               }else{
                   res = this.responseText
               }
               func(res)
           }
       })
       return this
   }
   /*
    @desc：ajax發送失敗后的回調
    */
   this.error = function(func){
       this.xhr.addEventListener('readystatechange',function(){
           if(this.readyState == 4 && this.status != 200){
               this.xhr.abort()
               func()
           }
       })
       return this
   }
   /*
    @desc：獲取ajax發送進度
    */
   this.progress = function(func){
       this.xhr.upload.addEventListener('progress',function(e){
           if(e.lengthComputable){
               var loading = Math.round(e.loaded / e.total * 100);
               func(loading)
           }
       })
       return this
   }
   /*
    @desc：拼湊ajax參數
    */
   this.request = function(){
       var obj = this.obj
       var data = obj.data
       var url = obj.url
       var type = obj.type
       var async = (obj.async)?obj.async:true
       var auth = obj.auth
       this.init()
       if(type == 'post'){
           this.xhr.open(type,url,async)
           this.xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
           if(data instanceof Object){
               if(data instanceof FormData){
                   var obj = {}
                   data.forEach(function(val,key){
                       if((key != 'undefined') && (val != 'undefined')){
                           obj[key] = val
                       }
                   })
                   data = this.jsontostr(obj)
               }else{
                   data = this.jsontostr(data)
               }
           }
       }else if(type == 'get'){
           var info = this.parseurl(url)
           var scheme = info.scheme
           var host = info.host
           var port = info.port
           var path = info.path
           var query = info.query
           if(data instanceof Object){
               if(data instanceof FormData){
                   var obj = {}
                   data.forEach(function(val,key){
                       if((key != 'undefined') && (val != 'undefined')){
                           obj[key] = val
                       }
                   })
                   data = this.jsontostr(obj)
               }else{
                   data = this.jsontostr(data)
               }
           }
           var psep = (path)?'/':''
           var sep = (query || data)?'?':''
           url = scheme+'://'+host+':'+port+psep+path+sep+query+data
           data = ''
           this.xhr.open(type,url,async)
       }else if(type == 'json'){
           this.xhr.open('post',url,async)
           this.xhr.setRequestHeader("Content-type", "application/json")
           if((typeof(data)=='string')||(data instanceof String)){
               data = this.strtojson(data)
           }else if(data instanceof Object){
               if(data instanceof FormData){
                   var obj = {}
                   data.forEach(function(val,key){
                       if((key != 'undefined') && (val != 'undefined')){
                           obj[key] = val
                       }
                   })
                   data = obj
               }
           }
           data = JSON.stringify(data)
       }else if(type == 'file'){
           this.xhr.open('post',url,async)
           if((typeof(data)=='string')||(data instanceof String)){
               return false
           }else if(data instanceof Object){
               if(!data instanceof FormData){
                   return false
               }
           }
       }
       if(auth){
           this.xhr.withCredentials = true
           this.xhr.setRequestHeader("Authorization", "Basic " + btoa(auth))
       }
       this.data = data
       return this
   }
   /*
    @desc：發送
    */
   this.send = function(){
       this.xhr.send(this.data)
   }
   }

2. 用法：

   var ajax = new ajax()
   var data = {
   data:'name=lee&sex=male',
   url:'http://localhost/test.php',
   type:'post',
   async:true
   }
   ajax.request(data).progress(
   function(loading){
   console.log(loading)
   }).success(function(data){
   console.log(data)
   }).error(function(){
   console.log(2)
   }).send()

3. 效果：