JSONP之我见
作者:bea
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 实现的人脸检测
- JS使用ajax方法获取指定url的head信息中指定字段值的方法
- JS使用ajax从xml文件动态获取数据显示的方法
- 推荐10 款 SVG 动画的 JavaScript 库
- JavaScript中textRange对象使用方法小结
- jQuery实现防止提交按钮被双击的方法
- 使用AngularJS 应用访问 Android 手机的图片库
- nodejs中实现阻塞实例
- nodejs中使用多线程编程的方法实例
- nodejs中实现sleep功能实例
- jQuery插件实现控制网页元素动态居中显示
- nodejs中的fiber(纤程)库详解
- jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
- 超级简单实现JavaScript MVC 样式框架
- JavaScript检测弹出窗口是否已经关闭的方法
- JavaScript跨平台的开源框架NativeScript
- JavaScript实现找质数代码分享
- JS获取及设置TextArea或input文本框选择文本位置的方法
- jQuery调用ajax请求的常见方法汇总