欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-21 21:53:14
实例如下: /* 封装ajax函数 * @param {string}opt.type http连接的方式,包括post和get两种方式 * @param...

实例如下:

/* 封装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)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。