美文网首页
jsonp理解

jsonp理解

作者: 颗颗87 | 来源:发表于2017-02-14 16:58 被阅读50次

1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;

2、不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如、、);

3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理;

4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据;

5、这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。

6、客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。

7、为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

特别的:

1、ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装;

2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加标签来调用服务器提供的js脚本。

3、所以说,其实ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。

4、还有就是,jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。

总而言之,jsonp不是ajax的一个特例,哪怕jquery等巨头把jsonp封装进了ajax,也不能改变这一点!

相关文章

  • jsonp理解

    1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、...

  • 理解 JSONP

    一、前置知识 页面与服务器的交互 在 AJAX 出现之前,页面与服务器的交互是怎么完成的呢? 通过提交 form ...

  • 理解jsonp

    1 什么是jsonp 首先,因为ajax无法跨域,然后开发者就有所思考 其次,开发者发现, 标签的src属性是可...

  • 理解JSONP 下

    理解JSONP 上 跨域SRJ 如果我访问其他网站的服务器,可以吗?由于JSONP可以规避同源策略,因此可以下面我...

  • 理解JSONP 上

    我们用node来做一个简易服务器理解JSONP,从而了解在没有Ajax的时代的前端是如何绞尽脑汁做好页面交互的 有...

  • 简单理解JSONP

    什么是同源策略? 浏览器出于安全方面的考虑,只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下,不...

  • 常用前端面试问题

    跨域方法 Jsonp: 采用非同源限制标签进行处理请求,我理解的jsonp => json - page一个jso...

  • JSONP

    JSONP 是一种 JSON 的使用方式, 这里的P 可以理解为 Padding 的意思.为什么要用 JSONP ...

  • 你知道JSONP的三种跨越模式吗?

    JSONP解释 在解释JSONP之前,我们需要了解下”同源策略“这个概念,这对理解跨域有帮助。基于安全的原因,浏览...

  • 你知道JSONP的三种跨越模式吗?

    JSONP解释在解释JSONP之前,我们需要了解下”同源策略“这个概念,这对理解跨域有帮助。基于安全的原因,浏览器...

网友评论

      本文标题:jsonp理解

      本文链接:https://www.haomeiwen.com/subject/ejaxwttx.html