ajax請求封裝


/**
 * 對封裝好的ajax請求進行調用
 * */
ajax({
    url:"", //請求地址
    type:'GET',   //請求方式
    data:{name:'zhangsan',age :'23',email:'2372734044@qq.com'}, //請求參數
    dataType:"json",     // 返回值類型的設定
    async:false,   //是否異步
    success:function (response,xml) {
        console.log(response);   //   此處執行請求成功后的代碼
    },
    fail:function (status) {
        console.log('狀態碼為'+status);   // 此處為執行成功后的代碼
    }

});
function ajax(options) {
    /**
     * 傳入方式默認為對象
     * */
    options = options || {};
    /**
     * 默認為GET請求
     * */
    options.type = (options.type || "GET").toUpperCase();
    /**
     * 返回值類型默認為json
     * */
    options.dataType = options.dataType || 'json';
    /**
     * 默認為異步請求
     * */
    options.async = options.async || true;
    /**
     * 對需要傳入的參數的處理
     * */
    var params = getParams(options.data);
    var xhr;
    /**
     * 創建一個 ajax請求
     * W3C標准和IE標准
     */
    if (window.XMLHttpRequest){
        /**
         * W3C標准
         * */
        xhr = new XMLHttpRequest();
    }else{
        /**
         * IE標准
         * @type {ActiveXObject}
         */
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    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.fail && options.fail(status);
            }
        }
    };
    if (options.type == 'GET'){
        xhr.open("GET",options.url + '?' + params ,options.async);
        xhr.send(null)
    }else if (options.type == 'POST'){
        /**
         *打開請求
         * */
        xhr.open('POST',options.url,options.async);
        /**
         * POST請求設置請求頭
         * */
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        /**
         * 發送請求參數
         */
        xhr.send(params);
    }
}
/**
 * 對象參數的處理
 * @param data
 * @returns {string}
 */
function getParams(data) {
    var arr = [];
    for (var param in data){
        arr.push(encodeURIComponent(param) + '=' +encodeURIComponent(data[param]));
    }
    console.log(arr);
    arr.push(('randomNumber=' + Math.random()).replace('.'));
    console.log(arr);
    return arr.join('&');
}
// myAjax
var myAjax = (function(){
  var defaultOption = {
    url: false,
    type: 'GET',
    data: null,
    success: false,
    complete: false
  }

  var ajax = function(options){
    for(var i in defaultOption){
      options[i] = options[i] || defaultOption[i];
    }
    // http 對象
    var xhr = new XMLHttpRequest();
    var url = options.url;
    xhr.open(options.type, url);
    // 監聽
    xhr.onreadystatechange = function(){
      if(xhr.readyState == 4){
        var result, status = xhr.status;
        if(status >= 200 && status < 300 || status == 304){
          result = xhr.responseText;
          if(window.JSON){
            result = JSON.parse(result);
          }else{
            result = eval('(' + result + ')');
          }
          ajaxSuccess(result)
        }
      }
    }
    // post
    if(options.type.toLowerCase() === 'post'){
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencode');
    }
    xhr.send(options.data);

    function ajaxSuccess(data){
      var status = 'success';
      options.success && options.success(data, options, status, xhr);
      options.complete && options.complete(status);
    }
  }
  // 閉包返回
  return ajax;
})()

var success = function(data){
  console.log(data['blog'])
}
var complete = function(status){
  if(status == 'success'){
    console.log('success')
  }else{
    console.log('failed')
  }
}
myAjax( {
  url: 'https://api.github.com/users/songjinzhong',
  success: success,
  complete: complete
} );


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM