借助script进行Http跨域请求:JSONP实现原理及代码_javascript技巧

当使用元素调用数据时, 响应内容必须用JavaScript函数名和圆括号包裹起来(也就是只能作为函数的参数), 而不是直接的一段json数据:
代码如下:
response(
[1, 2, {"hello", "world"}]
)

为了可行期间, 我们必须通过某种方式告诉服务, 它正在从一个元素调用, 必须返回一个jsonp响应, 而不是普通的json, 这个可以通过在url中添加一个查询参数来实现: 例如, 追加"?json"(或者&json)

在实践中, 支持jsonp的服务不会强制指定客户端必须实现的回调函数名称, 比如response. 相反它们使用查询参数的值, 允许客户端指定一个函数名,然后使用函数名去填充响应.
代码如下:
//根据指定的url发送一个json请求
//然后把解析得到的响应数据传递给回调函数
//在url中添加一个名为jsonp的查询参数, 用于指定该请求的回调函数的名称
function getJSONP(url, callback){
//为本次请求创建一个唯一的回调函数名称
var cbnum = "cb"+getJSONP.counter++;
var cbname = "getJSONP."+cbnum; //作为jsonp函数的属性
//将回调函数名称以表单编码的形式添加到url查询部分中
if(url.indexOf("?") === -1){
url += "?jsonp="+cbname;
}else{
url += "&jsonp="+cbname;
}
//创建用于发送请求
var script = document.createElement("script");
//定义被脚本执行的回调函数
getJSONP[cbnum] = function(response){
try{
callback(response); //处理响应
}
finally{
//删除该函数, 并移除相应script元素
delete getJSONP[cbnum];
script.parentNode.removeChild(script);
}
}
//立即触发http请求
script.src = url;
document.body.appendChild(script);
}
getJSONP.counter = 0;