使用原生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)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。