本文介绍如何在无需引入jQuery的情况下，使用原生JavaScript实现类似$.getJSON的JSONP跨域请求功能。通过动态创建script标签并解析URL参数，封装了一个轻量级的工具对象，适用于仅需少量跨域交互且希望减少依赖的Web开发场景。
原生JavaScript实现JSONP跨域请求的轻量级封装
在开发过程中，有时需要用到jQuery提供的$.getJSON方法。如果项目中仅有一处使用该方法，引入整个jQuery库显得过于沉重。为此，可以自行实现一个轻量级的替代方案，基本满足日常跨域数据获取的需求。
具体实现代码如下：
var $ = {
getJSON: function(url, params, callbackFuncName, callback){
var paramsUrl ="",
jsonp = this.getQueryString(url)[callbackFuncName];
for(var key in params){
paramsUrl+="&"+key+"="+encodeURIComponent(params[key]);
}
url+=paramsUrl;
window[jsonp] = function(data) {
window[jsonp] = undefined;
try {
delete window[jsonp];
} catch(e) {}
if (head) {
head.removeChild(script);
}
callback(data);
};
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.charset = "UTF-8";
script.src = url;
head.appendChild(script);
return true;
},
getQueryString: function(url) {
var result = {}, queryString = (url && url.indexOf("?")!=-1 && url.split("?")[1]) || location.search.substring(1),
re = /([^&=]+)=([^&]*)/g, m;
while (m = re.exec(queryString)) {
result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}
return result;
}
};调用示例如下：
代码如下：
var url = "http://xxx.xxx.xxx?callback=jsonp123";
var params = {
a:1,
b:2
};
$.getJSON(url, params, "callback", function(data){
//todo
});