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监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
jsonp跨域请求详解
Jul 13 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 Javascript
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 得到根目录的 __FILE__ 常量
2008/07/23 PHP
php $_SERVER当前完整url的写法
2009/11/12 PHP
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
微信小程序的引导页实现代码
2020/06/24 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
Python文件处理
2016/02/29 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
Python爬虫开发与项目实战
2020/12/16 Python
python自动化办公操作PPT的实现
2021/02/05 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
医学毕业生自我鉴定
2013/10/30 职场文书
法定代表人授权委托书
2014/04/04 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书