文档章节

JSON和JSONP的区别,以及使用方法

taote
 taote
发布于 2013/11/01 15:12
字数 566
阅读 6921
收藏 1

(一)场景

在拉京东城市选择的基础数据时候,遇到被服务器拒绝的情况,也就是ajax跨域问题

(二)json和jsonp

说的直白一点,在我们做ajax异步的一些功能的时候,一定会或多或少的遇到两个问题,(1、数据的交换。2、跨域问题)

JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了。我们在用其他关于src的标签的时候,都可以跨域。所以我们只要动态构造的src标签同样可以做到跨域。

?
1
2
3
4
5
6
7
<script type="text/javascript">
function jsonpCallback(result) 
  alert(result.msg); 
 }
 </script>
<script type="text/javascript" src=" http://crossdomain.com/jsonServerResponse?jsonp= jsonpCallback"></script>

从红色的地方可以看出,两个名字要一直,不过一般采用callback然后后面加一个“?”此时jquery会自动生成一个函数名,这样可以做到发送很多请求的时候,并不会互相影响。

同源策略 :即JavaScript只能访问与包含它的文档在同一域下的内容。

jsonp可以跨越同源策略,当我们使用了jsonp,将会是另外一种协议通信了。

JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

(三)使用方法

?
1
2
3
4
5
6
$.getJSON(" http://跨域的dns/document!searchJSONResult.action?name1="+value1+"&jsoncallback=?",
    function(json){
    if(json.属性名==值){
        // 执行代码
    }
});
?
1
2
3
4
5
$.ajax({
    async:false,
    url: http://跨域的dns/document!searchJSONResult.action,
    type:"GET",
    dataType:'jsonp',

通常情况一般是这两种使用方法,在跨域问题上,非常简单。

本文转载自:http://www.oldcaptain.cc/articles/2013/09/10/1378820707834.html

taote
粉丝 43
博文 74
码字总数 21848
作品 0
闵行
高级程序员
私信 提问
HTTP/RESTful 请求库--httpx.js

httpx.js 是一个简单的 JavaScript HTTP/RESTful 请求库。 主要方法 GET POST PUT PATCH DELETE Other JSON JSONP getScript 兼容情况 Firefox 4.0+ Chrome 7+ IE 9+ Opera 11.60+ Safari 5......

叶秀兰
2015/06/17
2.3K
0
bboss mvc结合jsonp实现跨站跨域应用间通讯功能介绍

本文介绍bboss mvc结合jsonp实现跨站跨域应用间通讯功能的使用方法和实现机制,切入主题。 bboss最新版本下载: https://github.com/bbossgroups/bbossgroups-3.5 bboss mvc最新版本通过mvc...

bboss
2012/05/16
0
0
使用mui.ajax完成跨域请求

一、代码 mui.ajax({ type:"post", url: serverip + '/api/v1/requestSMS/?jsoncallback=?', async:false, data: { mobile: mobile }, dataType: "jsonp", jsonp: "jsoncallback", success: ......

aa176
2017/04/08
0
0
使用mui.ajax完成跨域请求

一、代码 mui.ajax({ type:"post", url: serverip + '/api/v1/requestSMS/?jsoncallback=?', async:false, data: { mobile: mobile }, dataType: "jsonp", jsonp: "jsoncallback", success: ......

aa176
2017/04/08
0
0
json与jsonp的区别

其实json和jsonp本质上都是字符串,只是jsonp是外层包裹了一层函数。 json 下面是jquery的ajax请求,数据类型为json,它是以json格式在前后台进行数据的传输,它与局限性就是不能跨域请求,这...

马大哈tt
2017/11/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

MainThreadSupport

MainThreadSupport EventBus 3.0 中的代码片段. org.greenrobot.eventbus.MainThreadSupport 定义一个接口,并给出默认实现类. 调用者可以在EventBus的构建者中替换该实现. public interface ...

马湖村第九后羿
31分钟前
3
0
指定要使用的形状来代替文字的显示

控制手机键盘弹出的功能只能在ios上实现,安卓是实现不了的,所以安卓只能使用type类型来控制键盘类型,例如你要弹出数字键盘就使用type="number",如果要弹出电话键盘就使用type="tel",但这...

前端老手
41分钟前
5
0
总结:Raft协议

一、Raft协议是什么? 分布式一致性算法。即解决分布式系统中各个副本数据一致性问题。 二、Raft的日志广播过程 发送日志到所有Followers(Raft中将非Leader节点称为Follower)。 Followers收...

浮躁的码农
49分钟前
5
0
Flask-admin Model View字段介绍

Model View字段介绍 can_create = True 是否可以创建can_edit = True 是否可以编辑can_delete = True 是否可以删除list_template = 'admin/model/list.html' 修改显......

dillonxiao
今天
5
0
从AnnotationTransactionAspect开始rushSpring事务

0. Spring 事务 with LTW 0.1. Spring 事务 With LTW的原因: Pure Proxy-base mode有缺陷,其失效原因分析及使用方法及运行机制(LoadTimeWeaverBeanDefinitionParser和 AspectJWeavingEnable......

Aruforce
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部