首页 > 编程 > JavaScript > 正文

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

2019-11-19 15:11:18
字体:
来源:转载
供稿:网友

实例如下:

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表