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

跨域请求之JSONP

时间:2014-06-17 17:12:06      阅读:260      评论:0      收藏:0      [点我收藏+]

标签:iframe   优缺点   html5   

跨域恳求的方法有很多种,

1,iframe

2,document.domain

3,window.name

4,script

5,XDomainRequest (IE8+)

6,XMLHTTPRequest (Firefox3.5+)

7,postMessage (HTML5)

8,后台代理

...

它们有各自的优缺点,回来的数据格局也各不同,应根据需要慎重挑选。比方iframe回来html片段就对比适合,费老劲用它回来JSON就因小失大了。这篇开端我将打造一个有用的跨域恳求东西Sjax。运用script恳求的最大缺点,挑战是过错处理。比方404过错,它不象XMLHTTPRequest能精确的回来状况码404。我把这个放在最终一篇。


本系列首要描绘以上列举的方法4,即通过script回来JSON格局数据数据。这种方法如今称为JSONP。JSON是目前前后台交流运用最盛行,也最广泛的格局之一。相对于前期的AJAX回来XML(AJAX中的X即是XML),JSON显得更轻量级,没有剩余的Tag符号,解析也是原生的。XML回来到前端后先转成文档,通过DOM API一层层的解析。解析DOM是开支对比大的,尤其在前期的IE版别中(IE6/7/8),core js与dom交流的价值是很大的。


JSONP的实现思路很简单

1, 前端创立script符号,设置src,添加到head中(你可以往body中添加)。

2, 后台回来一个js变量jsonp,这个jsonp即是恳求后的JSON数据。

3, 回调完成后删去script符号(还有一些整理作业如防止有些浏览器内存泄露等)。


接口

Sjax.load(

    url,// 跨过恳求的URL

    success, // 回调函数,有必要界说一个形参,用于接纳后台回来的全局变量jsonp (约好后台回来如jsonp = {...}结构)

    timestamp,// 传true会加一个时间戳,防止缓存,默许不加

);

    <!DOCTYPE HTML>

<html> 

<head> 

    <meta charset="utf-8"> 

    <title>sjax_0.1.js by snandy</title>

    <script src="/js/sjax_0.1.js"></script>

</head> 

<body>

<p id="p1" style="background:gold;"></p>

<input type="button" value="Get Name" onclick="clk()"/>

<script type="text/javascript">

    function clk(){

        Sjax.load(

            ‘http://lf.yunnanw.cn/‘, 

            ‘http://www.lcsyt.com/‘, 

            ‘http://www.minnan888.net/‘, 

            ‘http://www.vipfuxin.com/‘, 

            ‘http://www.qclchina.com/‘, 

            ‘http://www.tongxinglong.com/‘, 

            ‘http://www.jinanwuliangye.com/‘, 

            ‘‘, 

            function(){

                document.getElementById(‘p1‘).innerHTML = ‘Hi, ‘ + jsonp.name;

            }

        );      

    }

</script>

</body>

</html>

    



跨域请求之JSONP,布布扣,bubuko.com

跨域请求之JSONP

标签:iframe   优缺点   html5   

原文地址:http://8917152.blog.51cto.com/8907152/1426950

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