Encapsulation js native partage d'exemples jsonp compatible ajax

Cet article vous apporte principalement un exemple ajax utilisant l'encapsulation native js (compatible avec jsonp). L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Les exemples sont les suivants :

/* 封装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;

Recommandations associées :

JavaScript encapsule ajax js par lui-même

JavaScript encapsule le code de données transmis par les compétences Ajax_javascript

Native JS encapsule le plug-in Ajax (même domaine, jsonp cross-domain)_javascript skills

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!