首页 > 代码库 > jsonp的使用

jsonp的使用

假设我们已经了解什么是同源策略,以及什么是浏览器的同源策略的限制。

现在我们需要在a.demo.com下的某个页面one.html 里加载不同域b.demo.com下的json数据。

我们都知道用<script>或者<img>标签的src属性是可以跨域从某个站点加载数据的,jsonp就是根据这个原理来实现。

我们同样也知道,当浏览器加载完<script>标签的内容之后,它会立即执行。所以为了不让浏览器报错,这些内容应该是一些变量的定义或者是函数的调用之类的东西。

但是,我们要使用这些数据,所以如果这些内容是变量的定义的话,那么我们将使用不了(你可以试下)。所以,我们要将这些数据包装在一个函数调用里面,让它作为这个函数调用的参数。

比如像下面这个样子:

jsonCallBack({"email":"123456789@qq.com"})

那么我们要在one.html里面怎么应用这个来自b.demo.com的数据呢?

讲完了理论,来实战。

首先,我们建立一个页面叫做jsonp-one.html,

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body>    <button id="getData"> click me to get data</button>    <script>        window.onload = function(){            var btn = document.getElementById(getData);            var handle = function(){               var scriptEle = document.createElement(script);               scriptEle.src = http://localhost:8080/jsonData.json?callback=jsonCallBack;               document.getElementsByTagName(body)[0].appendChild(scriptEle);            };            btn.addEventListener(click,handle,false);        }        var jsonCallBack = function(data){            console.dir(data);        }    </script></body></html>

我使用webstorm自带的浏览器查看功能,所以当我打开时,他的地址栏是这样的:http://localhost:63342/javascript/test/jsonp-one.html 

主机地址是localhost,端口号63342。

可以看到,代码里当点击按钮的时候,会新建一个script标签,然后设置它的src为我们所需要的数据来源的地址,最后加上?callback=jsonCallBack 。这样子数据文件就可以被加载到。最后我们将这个script插入到body里面。

图为还未点击按钮之前的页面以及控制台。

然后我们新建一个文件,叫做jsonData.json,名字不重要,只要和jsonp-one.html里面的一致即可,重要的是里面的内容:

jsonCallBack({"email":"123456789@qq.com"})

这里的数据其实是调用一个函数,函数名jsonCallBack,参数是我们真正要传给jsonp-one.html页面的数据。

现在我们另起一个服务,正如上面的代码所示,

http://localhost:8080/jsonData.json?callback=jsonCallBack

通过这个地址可以访问到刚才jsonData.json的内容。图为jsonData.json的内容:

然后我们可以看到,在jsonp-one.html里面,我们定义一个函数jsonCallBack,这样的话,当我们加载完来自8080端口的数据时,便能够立即调用这个函数,因为这个函数我们在这里已经定义过了,所以不会报错,能够正常执行。至于我们要用这些数据来干什么,那就是你自己在jsonCallBack这个函数里面要做的事情了。

当我们点击按钮时,我们可以看到浏览器的network以及控制台的输出:

控制台:

可以看到,数据正确加载了。

就这样,实现了使用jsonp技术,将数据从端口8080的这个域,传到端口63342的这个域。

jsonp的使用