Native JS-Kapselung, Ajax-kompatible JSONP-Beispielfreigabe

Dieser Artikel enthält hauptsächlich ein Ajax-Beispiel mit nativer JS-Kapselung (kompatibel mit JSONP). Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Beispiele sind wie folgt:

/* 封装ajax函数
 * @param {string}opt.type http连接的方式，包括POST和GET两种方式
 * @param {string}opt.url 发送请求的url
 * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
 * @param {object}opt.data 发送的参数，格式为对象类型
 * @param {function}opt.success ajax发送并接收成功调用的回调函数
 */
  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 () {};
    opt.dataType = opt.dataType || "json";
    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(opt.dataType != 'jsonp'){
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
          opt.success(xmlHttp.responseText);
        }
      }else{
        //alert(1); 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
          var oScript = document.createElement('script');
          document.body.appendChild(oScript);

          var callbackname = 'wangxiao'
          oScript.src = opt.url + "?" + postData+'&callback='+callbackname;

          window['wangxiao'] = function(data) {
            opt.success(data);
            document.body.removeChild(oScript);
          };
        }


      }

    };
  }
  export default ajax;

Verwandte Empfehlungen:

JavaScript kapselt Ajax-JS selbst

JavaScript kapselt den von Ajax übergebenen Datencode_Javascript-Fähigkeiten

Native JS kapselt das Ajax-Plug-in (gleiche Domäne, JSONP-domänenübergreifend)_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonNative JS-Kapselung, Ajax-kompatible JSONP-Beispielfreigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!