码迷,mamicode.com
首页 > Web开发 > 详细

jsonp的使用

时间:2014-11-24 23:59:19      阅读:582      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   os   使用   sp   

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

现在我们需要在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里面。

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

bubuko.com,布布扣

然后我们新建一个文件,叫做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的内容:

bubuko.com,布布扣

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

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

bubuko.com,布布扣

控制台:

bubuko.com,布布扣

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

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

jsonp的使用

标签:style   blog   http   io   ar   color   os   使用   sp   

原文地址:http://www.cnblogs.com/iceseal/p/4119749.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!