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

1. 场景

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

2. json和jsonp

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

JSONP的最基本的原理是:动态添加一个

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">jsonpCallback</span><span class="hljs-params">(result)</span> 
{</span> 
  alert(result.msg); 
 }
 </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">" http://crossdomain.com/jsonServerResponse?jsonp= jsonpCallback"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code>
从红色的地方可以看出,两个名字要一直,不过一般采用callback然后后面加一个“?”此时jquery会自动生成一个函数名,这样可以做到发送很多请求的时候,并不会互相影响。
同源策略 :即JavaScript只能访问与包含它的文档在同一域下的内容。jsonp可以跨越同源策略,当我们使用了jsonp,将会是另外一种协议通信了。
JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。
JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

3.使用方法

<code class="language-javascript hljs  has-numbering">$.getJSON(<span class="hljs-string">" http://跨域的dns/document!searchJSONResult.action?name1="</span>+value1+<span class="hljs-string">"&jsoncallback=?"</span>,
    <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(json)</span>{</span>
    <span class="hljs-keyword">if</span>(json.属性名==值){
        <span class="hljs-comment">// 执行代码</span>
    }
});
$.ajax({
    async:<span class="hljs-literal">false</span>,
    url: http:<span class="hljs-comment">//跨域的dns/document!searchJSONResult.action,</span>
    type:<span class="hljs-string">"GET"</span>,
    dataType:<span class="hljs-string">'jsonp'</span>,</code>

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值