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 处理 URL 的两个函数代码
Aug 13 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
浅析JavaScript回调函数应用
May 22 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
简单了解JavaScript中常见的反模式
Jun 21 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
56.com视频采集接口程序(PHP)
2007/09/22 PHP
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
PHP 观察者模式的实现代码
2013/05/10 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
Django自定义认证方式用法示例
2017/06/23 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
易程科技软件测试笔试
2013/03/24 面试题
中专毕业生求职简历的自我评价
2013/10/21 职场文书
法律六进活动方案
2014/03/13 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
学习雷锋主题班会
2015/08/14 职场文书
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android