基于原生JS的jsonp方法的实现
jsonp,相信大家并不陌生,是在js异步请求中解决跨域的方法之一,原理很简单,有不清楚的同学可以google下,这里就补详细解释了。在Jquery库中,jQuery直接封装有jsonp的方法,很简便,只需在ajax请求的参数中加入datatype:jsonp,jsonp:jsonpcallback即可,这里写下用原生js实现jsonp的源码。
load= function (url, cfg, success) { var op = Object.prototype.toString; var head = doc.getElementsByTagName('head')[0] || doc.head || doc.documentElement; if (op.call(cfg) === '[object Function]') { success = cfg; cfg = {}; } var type = cfg.type || 'script', jsonpCallback = cfg.jsonpCallback || 'fn'; jsonp = type == 'jsonp' ? (cfg.callbackName || 'callback') : '', data = cfg.data || '', dataToParam = function (data) { var ret = [], key, e = encodeURIComponent; for (key in data) { ret.push(key + '=' + e(data[key])) } return ret.join('&'); }, url = url + (/\?/.test(url) ? '&' : (jsonp || data) ? '?' : '') + (jsonp ? (jsonp + '=' + jsonpCallback) : '') + (data ? '&' + dataToParam(data) : ''); loadScript = function (url, callback) { var script = doc.createElement("script"); script.type = "text/javascript"; script.charset = "utf-8"; if (script.readyState) { //IE script.onreadystatechange = function () { if (/loaded|complete/i.test(script.readyState)) { script.onreadystatechange = null; callback && callback.call(this); } }; } else { //Others script.onload = function () { callback && callback.call(this); }; } script.src = url; head.insertBefore(script, head.firstChild); }, removeScript = function () { var arg = arguments, script = arg[0], jsonpCallback = arg[1], type = Object.prototype.toString; //移除脚本 if (script && /script/i.test(script.tagName)) { script.parentNode.removeChild(script); } //移除回调 if (jsonpCallback && type.call(jsonpCallback) === '[object String]') { window[jsonpCallback] = null; } success(); }; var callback = window[jsonpCallback] = success; loadScript(url, function () { removeScript(this, jsonpCallback); }); }
调用方法:load(url,{"type":"script":"data":{}},calback);,原理和方法都很简单,但是jsonp方法只适合于GET方法儿不适合POST方法,这个还是需要注意的。
收藏了
http://lidongbest5.com/blog/20/