欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

跨域请求之JSONP 一

程序员文章站 2022-03-29 20:56:54
跨域请求的方式有很多种, 1,iframe 2,document.domain 3,window.name 4,script 5,XDomainRequest (IE8+...

跨域请求的方式有很多种,

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标记(还有一些清理工作如避免部分浏览器内存泄露等)。

 

接口

view sourceprint?1 Sjax.load( 

2     url, // 跨越请求的URL 

3     success,  // 回调函数,必须定义一个形参,用于接收后台返回的全局变量jsonp (约定后台返回如jsonp = {...}结构) 

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

5 );

示例:

view sourceprint?01 <!DOCTYPE HTML> 

02 <html>  

03 <head>  

04     <meta charset="utf-8">  

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

06     <script src="https://files.cnblogs.com/snandy/sjax_0.1.js"></script> 

07 </head>  

08 <body> 

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

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

11 <script type="text/javascript"> 

12     function clk(){ 

13         Sjax.load( 

14             https://files.cnblogs.com/snandy/jsonp.js,  

15             function(){ 

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

17             } 

18         );       

19     } 

20 </script> 

21 </body> 

22 </html>

 

这个html实现一个最简单的前后台交互功能,点击按钮“Get Name”,获取到name后显示在段落P上。

clk函数中调用Sjax.load方法,Sjax中的S指script。之前我的Ajax系列中使用的Ajax命名,这里就使用了Sjax。

请求的后台url是jsonp.js,它返回如下

view sourceprint?1 jsonp = {name:jack};

因为是测试,这里使用最简单的方式实现。请求的后台其实不必是js文件,可以是php,java等任何后台语言,它们可能会连接数据库进行一系列的业务查询。总之它最后返回的结构必须变量jsonp,这个变量就是一个js对象,至于有多复杂则无需关注。

 

好了,试试吧