跨域JSONP实质与JavaScript实现

实质

利用script标签的src属性（浏览器允许script标签跨域），通过动态创建一个script标签，指定src属性为跨域的api，那么html会把返回的字符创当作javascript代码来进行解析，如果我们在返回的字符串中使用自定义函数形式包装起来，然后在html中调用自定义函数，即可拿到返回的字符串。

jQuery 使用

jQuery.getJSON 官方文档

原生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