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 相关文章推荐
浅析hasOwnProperty方法的应用
Nov 20 Javascript
Javascript玩转继承(二)
May 08 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
Javascript中replace()小结
Sep 30 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
vue+Element实现搜索关键字高亮功能
May 28 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
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
JS 对象介绍
2010/01/20 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
package.json文件配置详解
2017/06/15 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
jQuery实现评论模块
2020/08/19 jQuery
js实现弹幕墙效果
2020/12/10 Javascript
Python方法的延迟加载的示例代码
2017/12/18 Python
python的socket编程入门
2018/01/29 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
python 自动去除空行的实例
2018/07/24 Python
python set内置函数的具体使用
2019/07/02 Python
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
opencv实现图像平移效果
2021/03/24 Python
2015年幼儿园班务工作总结
2015/05/12 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js