JSONP跨域请求实例详解


Posted in Javascript onJuly 04, 2016

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, // 跨越请求的URL
success, // 回调函数,必须定义一个形参,用于接收后台返回的全局变量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跨域请求实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
JavaScript的Object.defineProperty详解
Jul 09 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 Javascript
解决vue中provide inject的响应式监听
Apr 19 Vue.js
Bootstrap表单布局样式源代码
Jul 04 #Javascript
JS JSOP跨域请求实例详解
Jul 04 #Javascript
json格式的javascript对象用法分析
Jul 04 #Javascript
jQuery简单动画变换效果实例分析
Jul 04 #Javascript
Node.js Streams文件读写操作详解
Jul 04 #Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 #Javascript
jQuery实现的导航下拉菜单效果
Jul 04 #Javascript
You might like
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
jquery select下拉框操作的一些说明
2010/04/02 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
js闭包学习心得总结
2018/04/17 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
Python反射的用法实例分析
2018/02/11 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
阿波罗盒子:Apollo Box
2017/08/14 全球购物
优秀员工自荐信范文
2013/10/05 职场文书
置业顾问岗位职责
2014/03/02 职场文书
支部鉴定材料
2014/06/02 职场文书
营销总监岗位职责
2014/09/16 职场文书
群众路线专项整治方案
2014/10/27 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
早会开场白台词大全
2015/06/01 职场文书
大学开学感言
2015/08/01 职场文书
cypress测试本地web应用
2022/06/01 Javascript