跨域JSONP实质与JavaScript实现
实质
利用script标签的src属性（浏览器允许script标签跨域），通过动态创建一个script标签，指定src属性为跨域的api，那么html会把返回的字符创当作javascript代码来进行解析，如果我们在返回的字符串中使用自定义函数形式包装起来，然后在html中调用自定义函数，即可拿到返回的字符串。
jQuery 使用
原生js实现
getJSONP
【实现】
var getJSONP = function(url, callback) {
//动态生成回调函数名并定义回调函数
var cbname = 'jsonp' + (new Date()).getTime();
window[cbname] = function(response) {
try {
callback(response); //处理响应
} finally {//清理工作
delete window[cbname];
script.parentNode.removeChild(script);
}
}
//动态添加script
var script = document.createElement("script");
script.src = url + cbname;
document.body.appendChild(script);
//请求成功
script.onload = script.onreadystatechange = function() {
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
alert('Loading successful');
script.onload = script.onreadystatechange = null;
}
}
//请求失败；IE 低版本不支持onerror，并且在加载失败时执行成功事件。
script.onerror = function() {
alert("Loading failed");
}
}
【使用】
var url = "http://127.0.0.1:9999/jsonp";
getJSONP(url + "?callback=", function(data) {//这里需要跟服务端协调好名字 比如callback或者jsoncallback等等
alert(data);
});
拓展
如果想全部浏览器兼容的话，在条件允许的情况下可以参考
How to trigger script.onerror in Internet Explorer?--stackoverflow
