react中的ajax封裝實(shí)例詳解

創(chuàng)新互聯(lián)為客戶提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、程序、域名、空間一條龍服務(wù)，提供基于WEB的系統(tǒng)開發(fā). 服務(wù)項(xiàng)目涵蓋了網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站程序開發(fā)、WEB系統(tǒng)開發(fā)、微信二次開發(fā)、手機(jī)網(wǎng)站制作設(shè)計(jì)等網(wǎng)站方面業(yè)務(wù)。

代碼塊

**opts: {'可選參數(shù)'}
**method: 請(qǐng)求方式:GET/POST,默認(rèn)值:'GET';
**url:  發(fā)送請(qǐng)求的地址, 默認(rèn)值: 當(dāng)前頁(yè)地址;
**data: string,json;
**async: 是否異步:true/false,默認(rèn)值:true;
**cache: 是否緩存：true/false,默認(rèn)值:true;
**contentType: HTTP頭信息，默認(rèn)值：'application/x-www-form-urlencoded';
**success: 請(qǐng)求成功后的回調(diào)函數(shù);
**error: 請(qǐng)求失敗后的回調(diào)函數(shù);
*/
let configResText = function (responseText, resTextType){
 return resTextType == 'html' ? responseText : JSON.parse(responseText);
};

let ajax = function (opts){
 //一.設(shè)置默認(rèn)參數(shù)
 var defaults = {  
   method: 'GET',
     url: '',
    data: '',
    async: true,
    cache: false,
 contentType: 'application/x-www-form-urlencoded',
 resTextType: '',
   success: function (){},
    error: function (){}
 };

 //二.用戶參數(shù)覆蓋默認(rèn)參數(shù)  
 for(var key in opts){
  defaults[key] = opts[key];
 }

 //三.對(duì)數(shù)據(jù)進(jìn)行處理
 if(typeof defaults.data === 'object'){  //處理 data
  var str = '';
  for(var key in defaults.data){
   var curDataStr = JSON.stringify(defaults.data[key]);
   if (curDataStr.charAt(0) == '[' && curDataStr.charAt(curDataStr.length-1) == ']') {
    var arrQuery = JSON.parse(curDataStr).map(function (item){
     return key + '[]=' + item
    }).join('&');
    str += key + '=' + arrQuery + '&';
   } else {
    str += key + '=' + defaults.data[key] + '&';
   }
  }
  defaults.data = str.substring(0, str.length - 1);
 }

 defaults.method = defaults.method.toUpperCase();  //處理 method

 defaults.cache = defaults.cache ? '' : '&' + new Date().getTime() ;//處理 cache

 if( defaults.method === 'GET' && (defaults.data || defaults.cache) ) {
  defaults.url += String('?' + defaults.data + defaults.cache);  //處理 url
  if(defaults.cache){
   defaults.url = defaults.url.replace(/(\?[^\?]+)\?/gi, '$1');
  }
 }

 //四.開始編寫ajax
 //1.創(chuàng)建ajax對(duì)象
 var oXhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
 //2.和服務(wù)器建立聯(lián)系，告訴服務(wù)器你要取什么文件
 oXhr.open(defaults.method, defaults.url, defaults.async);
 //3.發(fā)送請(qǐng)求
 if(defaults.method === 'GET')
  oXhr.send(null);
 else{
  oXhr.setRequestHeader("Content-type", defaults.contentType);
  oXhr.send(defaults.data);
 }  
 //4.等待服務(wù)器回應(yīng)
 oXhr.onreadystatechange = function (){
  if(oXhr.readyState === 4){
   if(oXhr.status === 200)
    defaults.success.call(oXhr, configResText(oXhr.responseText, defaults.resTextType));
   else{
    defaults.error();
   }
  }
 };
};

export default ajax;

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章題目：react中的ajax封裝實(shí)例詳解-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://weahome.cn/article/djjjjh.html