如需转载请注明来源
首先要理解跨域，要知道什么是同源：
同源策略(Same origin Policy)
浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。
本域指的是？
同协议：如都是http或者https
同域名：如都是http://jirengu.com/a 和http://jirengu.com/b
同端口：如都是80端口
如：
http://jirengu.com/a/b.js 和 http://jirengu.com/index.php (同源)
不同源的例子：
http://jirengu.com/main.js 和 https://jirengu.com/a.php (协议不同)
http://jirengu.com/main.js 和 http://bbs.jirengu.com/a.php (域名不同，域名必须完全相同才可以)
http://jiengu.com/main.js 和 http://jirengu.com:8080/a.php (端口不同,第一个是80)
看完以上之后就知道，跨域主要是如何实现非同源之间的交互。
JSONP：JSONP是一种语法，JSONP是动态的JS。用来跨域。
实现原理如下：引入一个script标签，在标签的src里面输入url，并且要传入一个callback参数。这样一来浏览器解析就会出现如下callback( data )，这样我们只要自身写好function callback (data){}就好了（如果你引入了太多script觉得烦的话可以进行删除script标签）。
接下来我们根据一个API来实现JSONP。
API：http://api.jirengu.com/weather.php?callback=getCity
为了简化说明，我们对于data处理只处理一city这个参数。
首先，写出一个简单有力的html：
<div class="box">
<h2>你的城市是</h2>
<h3 class='city'>未显示</h3>
</div>
<button class="btn">点击获取你的城市</button>
接下来才是重头：
//获取一下元素
var city=document.querySelector('.city');
var btn=document.querySelector('.btn');
//点击btn后创建一个script标签并导入页面，所以你应该这样写：
btn.addEventListener('click', function(){
var oScript=document.createElement('script');
//要特别注意callback=。。。这个参数。
oScript.src='http://jirenguapi.applinzi.com/weather.php?callback=getCity'
document.head.appendChild(oScript);
//立刻删除script标签页没事，反正已经下载好了
document.head.removeChild(oScript);
})
//接着，处理下载好的内容
function getCity(obj){
//API传入了什么东西，可以自己点开看看
if(obj.error!=0){
city.innerHTML='api出问题';
}else{
city.innerHTML=obj.results[0].currentCity;
}
}
//这样大功告成
根据以上代码实现的效果，可以戳一下地址
