章节
问答
课签
笔记
评论
占位
占位

json与jsonp

JSON:把响应的结果当作 JSON 执行,并返回一个 JavaScript 对象。如果指定的是 json,响应结果作为一个对象,在传递给成功处理函数之前使用 jQuery.parseJSON 进行解析。 解析后的 JSON 对象可以通过该 jqXHR 对象的 responseJSON 属性获得的。json 的处理只要是在 ajaxConvert 方法中把结果给转换成需要是 json 格式,这是后面的内容,这里主要研究下 jsonp 的预处理。

JSONP:是一个非官方的协议,它允许在服务器端集成 Script tags 返回至客户端,通过javascript callback 的形式实现跨域访问(这仅仅是 JSONP 简单的实现形式)。JSON 系统开发方法是一种典型的面向数据结构的分析和设计方法,以活动为中心,一连串的活动的顺序组合成一个完整的工作进程。

JSONP 出现的根源:

  • 跨域这个问题的产生根本原因是浏览器的同源策略限制,理解同源策略的限制同源策略是指阻止代码获得或者更改从另一个域名下获得的文件或者信息。也就是说我们的请求地址必须和当前网站的地址相同。同源策略通过隔离来实现对资源的保护,解决这个限制的一个相对简单的办法就是在服务器端发送请求,服务器充当一个到达第三方资源的代理中继。虽然是使用广泛但是这个方法却不够灵活。
  • 另一个办法就是使用框架(frames),将第三方站点的资源包含进来,但是包含进来的资源同样要受到同源策略的限制。
  • 有一个很巧妙的办法就是在页面中使用动态代码元素,代码的源指向服务地址并在自己的代码中加载数据。当这些代码加载执行的时候,同源策略就不会起到限制。但是如果代码试图下载文件的时候执行还是会失败,幸运的是,我们可以使用JSON(JavaScript Object Notation)来改进这个应用。

JSON 和 JSONP

与 XML 相比,JSON 是一个轻量级的数据交换格式。JSON 对于JavaScript开发人员充满魅力的原因在于 JSON 本身就是 Javascript中的对象。

例如一个 ticker 对象:

var ticker = {symbol:'IBM',price:100}
而JSON串就是 {symbol:'IBM',price:100}
  • 这样我们就可以在函数的参数中传递 JSON 数据。我们很容易掌握在函数中使用动态的 JSON 参数数据,但是我们的目的并不是这个。
  • 通过使我们的函数能够加载动态的 JSON 数据,我们就能够处理动态的数据,这项技术叫做 Dynamic Javascript Insertion。

index.html 中:

function showPrice(data){ 
    alert("Symbol:" + data.symbol + ", Price:" + data.price)
}

然后动态加载 ticker.js 脚本

var data = {symbol:'IBM', price:100}; 
showPrice(data);
  • 代码通过动态加入 Javascript 代码,来执行函数加载数据。正如之前提到过的,同源策略对于动态插入的代码不适用。也就是你可以从不同的域中加载代码,来执行在他们代码中的 JSON 数据。这就是 JSONP(JSON with Padding)。注意,使用这种方法时,你必须在页面中定义回调函数,就像上例中的 showPrice 一样。
  • 我们通常所说的 JSONP 服务(远程 JSON 服务),实际上就是一种扩展的支持在用户定义函数中包含返回数据的能力。这种方法依赖于必须接受一个回调函数的名字作为参数。然后执行这个函数,处理 JSON 数据,并显示在客户页面上。
所以总结其实 json 的一个核心点:允许用户传递一个 callback 参数给服务端,然后服务端返回数据时会将这个 callback 参数作为函数名来包裹住 JSON 数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

 

任务

?不会了怎么办
||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?