使用原生js封装的ajax实例(兼容jsonp)

实例如下：

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

以上这篇使用原生js封装的ajax实例(兼容jsonp)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。