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、服务器代理、图片等等