mui 跨域請求

mui 本身不能跨域需要引入mui.jsonp.js插件

/**
 * MUI JSONP
 * varstion 1.0.0
 * by Houfeng
 * [email protected]
 */
//jsnop.js

(function($, win, doc) {

	var callbackIndex = 0;

	//生成回調函數名
	var createCallbackName = function() {
		return 'mui_jsonp_callback_' + (callbackIndex++);
	};

	var container = doc.body;

	//導入 script 元素
	var importScript = function(url) {
		var element = doc.createElement('script');
		element.src = url;
		element.async = true;
		element.defer = true;
		container.appendChild(element);
		return element;
	};

	//轉換 URL，JSONP 隻支援 get 方式的 queryString ,需将 data 拼入 url
	var convertUrl = function(url, data, jsonpParam, callbacnName) {
		if (jsonpParam) {
			url = url.replace(jsonpParam + '=?', jsonpParam + '=' + callbacnName);
		} else {
			data['callback'] = callbacnName;
		}
		var buffer = [];
		for (var key in data) {
			buffer.push(key + '=' + encodeURIComponent(data[key]));
		}
		return url + (url.indexOf('?') > -1 ? '&' : '?') + buffer.join('&');
	};

	//擷取 QueryString
	var getQueryString = function(url) {
		url = url || location.search;
		var splitIndex = url.indexOf('?');
		var queryString = url.substr(splitIndex + 1);
		var paramArray = queryString.split('&');
		var result = {};
		for (var i in paramArray) {
			var params = paramArray[i].split('=');
			result[params[0]] = params[1];
		}
		return result;
	}

	//擷取将傳遞給伺服器的回調函數的請求參數名
	var getJSONPParam = function(url) {
		var query = getQueryString(url);
		for (var name in query) {
			if (query[name] === '?') {
				return name;
			}
		}
		return null;
	};

	/**
	 * @description JSONP 方法
	 * @param {String} url  将請求的位址
	 * @param {Object} data 請求參數資料
	 * @param {Function} callback 請求完成時回調函數
	 * @return {mui} mui 對象自身
	 **/
	$.getJSONP = function(url, data, callback) {
		if (!url) {
			throw "mui.getJSONP URL error!";
		}
		var jsonpParam = getJSONPParam(url);
		var callbackName = createCallbackName();
		data = data || {};
		callback = callback || $.noop;
		url = convertUrl(url, data, jsonpParam, callbackName);
		var scriptElement = null;
		win[callbackName] = function(result) {
			callback(result);
			if (scriptElement) {
				container.removeChild(scriptElement);
			}
			win[callbackName] = null;
			delete win[callbackName];
		};
		scriptElement = importScript(url);
		return $;
	};

	//為原 mui.getJSON 方法添加同 jQuery.getJSON 一樣的 JSONP 支援
	$.__getJSON = $.getJSON;
	$.getJSON = function(url, data, callback) {
		var isJSONP = getJSONPParam(url) != null;
		if (isJSONP) {
			return $.getJSONP(url, data, callback);
		} else {
			return $.__getJSON(url, data, callback);
		}
	};

}(mui, window, document));
           

下面是應用

mui.ajax({
   url: 'http://api.xiaoaiyunshe.com/WebPay/payment',
   data: {
         money: "0.01",
         pay: "webAlipay"
   },
   async: true,
   dataType: 'jsonp',
   headers: {
       'x-header-xa-token': loginKey
   },
   crossDomain: true, //強制使用5+跨域  
   type: 'post',
   timeout: 10000,
   success: function(data) {
   }
})