JSONP跨域请求实例详解

时间:2021-05-26

JSOP简介

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

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

1.iframe
2.document.domain
3.window.name
4.script
5.XDomainRequest (IE8+)
6.XMLHTTPRequest (Firefox3.5+)
7.postMessage (HTML5)
8.后台代理
9....

它们有各自的优缺点,返回的数据格式也各不同,应根据需求慎重选择。比如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, // 跨越请求的URLsuccess, // 回调函数,必须定义一个形参,用于接收后台返回的全局变量jsonp (约定后台返回如jsonp = {...}结构)timestamp, // 传true会加一个时间戳,防止缓存,默认不加);

示例:

<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <title>sjax_0.1.js by snandy</title><script src="http://files.cnblogs.com/snandy/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://files.cnblogs.com/snandy/jsonp.js', function(){document.getElementById('p1').innerHTML = 'Hi, ' + jsonp.name;}); }</script></body></html>

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

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

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

jsonp = {name:'jack'};

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

以上所述是小编给大家介绍的JSONP跨域请求实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章