JSONP的原理介绍

1.JSOP存在的必要性   参考1 ,2

  Ajax数据的获取需要遵循同源的策略，也就是需要使用相同的域名、端口、协议，所以要想获取不同域的数据就存在问题。因此基于此问题就衍生出了很多解决Ajax跨域的技术，譬如：服务器代理、img、iframe等等技术。 JSONP是JSON with padding的缩写。

---

 

2.JSONP的原理

  在本地创建一个回调函数，然后在跨域段调用该回调函数，并将JSON数据作为参数传递给回调函数，完成回调。

---

 

3.案例解析

  a.html需要跨域解决问题

  

<script>
    function aa(data){
         alert(data.message);
   }

   function loadScript(url){
       var script  =  document.createElement('script');
       script.setAttribute('type','text/javascript');
       script.src = url;
       document.body.appendChild(script);
  }

  window.onload = function(){
     
    var a = document.getELementById('aaa');
    a.onclick = function(){
        var url = "http://b.html?callback=aa";
        loadScript(url);
    }
  }
</script>

在b页面,执行回调函数，并将json数据作为参数填充到回调函数中，完成回调函数  

1.获取回调函数
2.然后执行回调函数
  var  data = {

     "message" :"sucess"
  }

  callback(data);

---

4.Ajax技术与JSONP技术的差别

   1.两种技术“看起来”很像，目的一样，都是请求一个URL，然后对从服务器端获取的数据进行处理；

   2.Ajax技术的核心是通过XMLHttpRequest对象来获取数据，而JSONP通过动态创建script，然后在服务器端执行回调函数完成数据的获取，采用的是两种完全不同的技术；

   3.区别不在于是否跨域，jsonp也可以解决同域的数据获取。

---

5.解决跨域的其他方法

  iframe、服务器代理、图片等等