JSONP之我见


Posted in Javascript onMarch 24, 2015

JavaScript初学,一点自己的理解,有不当之处请大家指正~

JSONP:

本地html文件要获取xxx网站(跨域)数据时使用的方法。

跨域问题:

外部服务器的数据只能用外部服务器中的js访问,本地js无法用XMLHttpRequest()访问。

外部服务器中的Web服务提供JSON数据,比如在http://gumball.wickedlysmart.com/中,数据包含在函数updateSales中作为参数,现在要在本地html中访问外部服务器中的JSON数据该怎么办呢?

1, 查看Web服务文档,明确服务实际使用的参数名(本例只有一个参数即一个对象数组);
2, 在url中指定一个回调函数,http://gumball.wickedlysmart.com/?callback=updateSales,用来指定Web服务中访问JSON数据的函数名;
3, 在本地js文件中使用刚才定义的函数名创建函数updateSales(对象),编写处理得到外部JSON数据的方法;
4, 在html文件中的<body>标签下使用<script>标签链接到外部Web服务,url为2中的那个路径。

总结:

JSONP目的在于提供给本地html一个函数接口(本地html可通过在url后方加入?callback=functionName的方法指定函数名),为了确保数据访问的安全,服务器将安全的数据放在回调函数的参数中,函数内部的参数就是服务器提供给本地的数据,至于怎么使用这些数据就要在本地的js中定义这个callback函数了。

注意:本地使用JSONP请求访问Web服务,可能会获取不安全的Js代码,所以要确保信任这个Web服务。

JSONP与XMLHttpRequest:

         XMLHttpRequest用于开发内部Web服务,内部访问内部,同域访问会更加简便。

         访问外部数据时(跨域访问)就要使用JSONP。

以上所述就是本文的全部内容了,希望大家能够喜欢,能够对大家学习jsonp有所帮助。

Javascript 相关文章推荐
javascript new fun的执行过程
Aug 05 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 #Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 #Javascript
jQuery定义背景动态切换效果的方法
Mar 23 #Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 #Javascript
jQuery实现拖拽效果插件的方法
Mar 23 #Javascript
jQuery操作表单常用控件方法小结
Mar 23 #Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 #Javascript
You might like
初级的用php写的采集程序
2007/03/16 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
javascript canvas API内容整理
2020/02/16 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
python实现查询苹果手机维修进度
2015/03/16 Python
Python 的 Socket 编程
2015/03/24 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
python对csv文件追加写入列的方法
2019/08/01 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
薇姿法国官网:Vichy法国
2021/01/28 全球购物
办理生育手续介绍信
2014/01/14 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
Python pyecharts绘制条形图详解
2022/04/02 Python