JSONP跨域

本文归饥人谷和本人所有，如需转载请注明来源
首先要理解跨域，要知道什么是同源：

同源策略(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;
        }
    }
//这样大功告成

根据以上代码实现的效果，可以戳一下地址