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中最简洁的编码html字符串的方法
Oct 11 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
canvas绘制环形进度条
Feb 23 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
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
自己动手做一个SQL解释器
2006/10/09 PHP
最省空间的计数器
2006/10/09 PHP
PHP学习 变量使用总结
2011/03/24 PHP
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
splice slice区别
2006/10/09 Javascript
JavaScript 私有成员分析
2009/01/13 Javascript
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
AngularJS语法详解
2015/01/23 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
初步解析Python下的多进程编程
2015/04/28 Python
Python中return语句用法实例分析
2015/08/04 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
python编程实现归并排序
2017/04/14 Python
Python与R语言的简要对比
2017/11/14 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
基于Python的文件类型和字符串详解
2017/12/21 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
python生成任意频率正弦波方式
2020/02/25 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
幼师自我鉴定范文
2013/10/01 职场文书
财务会计毕业生自荐信
2013/11/02 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python