JSONP原理及实现跨域方式

JSONP的出现是因为游览器的同源策略，所谓同源是指所请求的主机，域名，协议，端口与当前相同。同源策略限制了我们无法通过原生的XMLHttpRequest()对象获取到json数据。为了突破这个限制，开发者想出了一个解决方案，JSONP。

什么是JSONP

---

首先jsonp不是json数据，JSON是一种数据格式，而JSONP是一种数据调用方式，是解决JSON跨域获取的解决方案。因此JSONP（JSON with Padding）其实是一个非官方的协议。

JSONP原理

---

由于同源策略，XMLHttpRequest()对象无法跨域，但<script> 、<img>、<link>等标签是可以跨域的。所以可以利用<script>标签来向服务器发送请求，服务器端接收到请求后返回一段js代码，调用客户端写好的方法，并把JSON数据传入该方法中，客户端即可拿到数据。

原理：script请求php文件->php输出JavaScript文本->文本代码中包含JSON
数据->返回的代码文本插入到客户端中->客户端交互返回的JavaScript文本。

原理知道了，再看下代码是怎么实现的。
jQuery版：

 $.ajax({
    dataType:'jsonp',
    jsonp:'jsonp_callback',  //后端检测请求所包含的值是否是jsonp_callback
    url:'http://www.baidu.com/getData.php',
    success:function(){
        //dosomthing
    }
});

JavaScript版：

function json(jsonObj) {
   //dosomthing
}
    
// 调用jsonHandle，传入地址、追加参数，服务器端返回js代码，
// 并调用客户端写好的json方法并把json数据传入进来。
function jsonHandle(url) {
    var script = document.createElement("script");
    script.setAttribute("src",url);
    document.body.appendChild(script);
    
    // 防止 script 标签冗余
    if(oScript) {
      document.body.removeChild(oScript);
    }
}

JSONP总结

---

本文已经涉及到后端的代码，但是对后端的代码不是非常熟悉，故没有贴出来。但要想掌握好JSONP跨域的知识或者更好的理解，了解后端（比如php）的一些知识是非常有必要的。

最后注意一点！虽然jQuery把JSONP内置在了AJAX里，但是一定要清楚，jQuery的AJAX和JSONP是完全不一样的，一定不能混淆！