热爱web前端
技术分享平台

JSONP工作原理

Ajax

要谈Jsonp就想要来了解一下Ajax。Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序。

但是有经验的程序员都知道由于受到浏览器的限制,Ajax不能跨域获取数据,所谓跨域就是读取另一个地方的数据(不同服务器,同一服务器不同端口,不同协议(http/https等),一个ip不同域名等,这些都算跨域)。但很多时候我们需要收集第三方的数据(或者说另一台服务器上的数据)。解决跨域问题的方法很多,其中jsonp就算其中一种。

JSONP

理论性的东西说多了也没用,对程序猿来说看代码往往比文字更容易理解,那就直接上代码了:

Demo1

function fun(data){
    console.log(data.name);
}

fun({name: 'tenfour'});

是个程序猿知道这在干嘛,传递参数调用函数呗。

Demo2

<script scr="a.js"></script>
<script scr="b.js"></script>

/*a.js内容*/
function fun(data){
    console.log(data.name);
}
/*b.js内容*/
fun({name: 'tenfour'});

这尼玛不就是把两个JS分开了么!

Demo3

<script scr="//www.domain1.com/a.js"></script>
<script scr="//www.domain2.com/b.js"></script>

/*a.js内容*/
function fun(data){
    console.log(data.name);
}
/*b.js内容*/
fun({name: 'tenfour'});

把两个JS放在不同服务器上。能看懂?那就了解jsonp了!

纳尼!哪个Demo提到Jsonp了?!别急,继续往下看。

然后我们假设b.js的内容是从第三方服务器返回的,a.js是本地服务器的js,那么我们可以通过下面代码加载:

        var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "//www.domain2.com/b.js";
    document.getElementsByTagName('head')[0].appendChild(script);

        /*a.js内容*/
    function fun(data){
        console.log(data.name);
    }
    /*b.js内容*/
    fun({name: 'tenfour'});

未经允许不得转载:前端网(w3cvip) » JSONP工作原理

分享到:更多 ()

评论 抢沙发

评论前必须登录!