`
hongtoushizi
  • 浏览: 378916 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

说说jsonp

阅读更多

什么是jsonp

jsonp充其量只能说是一种“方法”。它可以让页面从其他域中获取资料。

 

首先要知道的是同源策略,在javascript中使用http请求(ajax)是会受到同源策略的限制的。A网站的页面是不能在javascript中访问B网站的资源的。但是,对于这种希望A网站访问B网站的资源的需求怎么办呢?(跨域访问)。jsonp就出现了。

 

html 中虽然说javascript是不能跨域的,但是有许多标签,比如<img>,<iframe>,<script> 这些有src属性的标签是不受同源策略的影响的。于是jsonp就把脑筋动到script标签上了。一般script都是静态的,但是script能否是 动态的呢?

 

比如我在script的src中的url带上用户id,这样来访问一个跨域的请求,请求返回这个用户的 个人信息,我再使用这个个人信息来渲染我的页面。这样不就可以完成了一个跨域请求了。但是呢?script中返回的必须是javascript,所以呢, 一般就约定,src中的url除了要带动态请求所需要的信息以外,还需要带一个回调信息(一般是一个回调函数),让请求返回的数据是一个可执行的 javascript的完整语句。

 

比如:

1
2
3
4
5
6
7
8
9
function handle_data(data) {
   // `data` is now the object representation of the JSON data
}
 
 
---
http://some.tld/web/service?callback=handle_data:
---
handle_data({"data_1": "hello world", "data_2": ["the","sun","is","shining"]});

再问个经常问到的问题,jsonp和ajax,json有什么关系呢?

首先jsonp和ajax完全是两个概念,可以说jsonp出现的理由就是弥补ajax无法跨域访问的缺陷而出现的。所以这两个概念没啥关系。至于有些框架,比如jquery喜欢把ajax和jsonp放在一起,完全是由于他们的调用和使用方式很相像而已。

 

jsonp返回的数据并不是json,而是javascrip,比如上例中的handle_date中返回的数据一定要是json么?从来没人这么说过。再次吐槽下,特别是前端的这些概念的名词确实起的很容易让人迷糊。

jsonp有什么优点呢?

第一个优点当然是能跨域了。一个访问不再受限于域名了,这个代表什么呢?代表我可以提供一个公共的webservice了,这个服务可以给你服务,也可以给他服务,你们不需要一定是在我的域名下的。

 

其次的优点是将回调方法的权限给了调用方。这个就相当于将controller层和view层终于分开了。我提供的jsonp服务只提供纯服务的数 据,至于提供服务以后的页面渲染和后续view操作都由调用者来自己定义就好了。如果有两个页面需要渲染同一份数据,你们只需要有不同的渲染逻辑就可以 了,逻辑都可以使用同一个jsonp服务。

 

还有一个优点是它甚至不需要浏览器能支持XMLHTTPRequest,就是说所有的浏览器都可以使用这个技术。

json有什么缺点呢?

首先的缺点是安全性。万一假如提供jsonp的服务存在页面注入漏洞,即它返回的javascript的内容被人控制的。那么结果是什么?所有调用 这个jsonp的网站都会存在漏洞。于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的。

 

其次是错误处理,jsonp在调用失败的时候不会返回各种HTTP状态码。只有200,没有404,没有500等状态码让你来标识是否要重新调用。

 

它只能支持GET,而不能支持POST请求,所以它的参数一定是带在HTTP头中的,会受到一些参数的限制,比如长度限制。

参考文章

http://blog.csdn.net/liaomin416100569/article/details/5480825

http://jingyan.baidu.com/article/eb9f7b6dbd3ff0869364e81c.html

http://www.json-p.org/

http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html

 

转载自: http://www.cnblogs.com/yjf512/p/3222269.html

分享到:
评论

相关推荐

    说说JSON和JSONP 也许你会豁然开朗

    JSON(JavaScript Object Notation)和JSONP(JSON with Padding)就是为了解决这两个问题而产生的技术。 JSON是一种轻量级的数据交换格式,它基于纯文本,拥有良好的跨平台传递能力,并且与JavaScript有原生的集成...

    jsonp跨域请求数据实现手机号码查询实例分析

    之前一篇《说说JSON和JSONP 也许你会豁然开朗》对jsonp已经介绍的很详细了,这里就不多介绍了,直接上实例吧 代码: &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=utf-8 /&gt; &lt;meta name=...

    原生JS封装Ajax插件(同域、jsonp跨域)

    简单说说思路,如有不正确的地方,还望指正^_^ 一、Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象...

    shuoshuo:说说系统

    5. **JSONP跨域请求**:如果“说说”系统的服务端和前端不在同一域名下,可能需要使用JSONP(JSON with Padding)来绕过浏览器的同源策略,实现跨域数据请求。 6. **模板引擎**:为了方便快速生成HTML,系统可能会...

    [原创]在手机上查询湖南省住房公积金 PHP代码实现

    下面说说的我的思路: 1、到官方网站查询过程,用到的工具Fidder 2、分析提交地址与数据整理 3、app页面不能直接提交数据到查询网站,因为跨域问题。 4、PHP服务端POST,GET类请求类封装。 5、PHP服务端HTMLDOM类分析...

    AHRID-黑客攻击画像分析系统.zip

    题外话说的有点多了,来说说为什么开发这样一个平台:作为一个防守方光看日志固然是枯燥无味的,偶尔来几次反向打击啥的,增添防守的乐趣~所以我想到了做这样一个系统,就是想在“空暇”时间能获取点“黑客攻击者”...

    Ajax实例,代码清晰,注释明了

    但通过CORS(Cross-Origin Resource Sharing)或者JSONP(JSON with Padding)等方式,可以实现跨域通信。 7. **DOM操作**:接收到数据后,通常需要更新DOM(Document Object Model)来改变网页内容。JavaScript...

    vue-resource调用promise取数据方式详解

    先来说说 vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。 vu

    MingGeJS1.7.3类库

    然后说说,JSONP,同时触发JSONP时,引起公共变量被占用的问题。已修复, 当公共变量被占用时,线程会等待公用变量消失,如果超时就关闭所有线程 如果用户不设置超时,那么程序默认只等待连接30次!这个方案,应该...

    前端岗面试官问题集V1.0(1)(1).docx

    答:跨域处理可以使用jsonp或cors来实现,控制权限额大的H5可以使用token或oauth来实现。 九、JS基础 9. 说说你对Promise的理解,promise与async有什么区别?async的返回值是什么?答:Promise是异步编程的一种...

    前端vue常见面试题 (附带答案) 完整版.docx

    - 使用JSONP(仅限GET请求)。 ### 3. 说说Vue,React,angularjs,jquery的区别 - **Vue**:轻量级框架,专注于视图层,易于上手。 - **React**:专注于构建UI的JavaScript库,不提供状态管理等高级功能。 - **...

    前端vue常见面试题 (附带答案) 完整版PDF.pdf

    说说Vue、React、AngularJS、jQuery的区别 - **Vue**:轻量级框架,易于上手,适合中小型项目。 - **React**:专注于视图层的库,灵活性高,适合大型项目。 - **AngularJS**:全栈框架,内置许多功能,学习曲线较...

    前端Vue常见面试题大全.docx

    - **JSONP:** 利用 `&lt;script&gt;` 标签的 src 属性不受同源策略限制。 - **代理服务器:** 通过服务器转发请求到目标服务器,绕过浏览器的同源策略。 #### 15. Vue组件通信有哪些方式 - **props / $emit:** 父子...

Global site tag (gtag.js) - Google Analytics