jsonp原理及JSONP实现方式

1.什么是JSONP?jquery

为了便于客户端使用数据,逐渐造成了一种非正式传输协议,人们把它称做JSONP,该协议的一个要点就是容许用户传递一个callback参数给服务端,而后服务端返回数据时会将这个callback参数做为函数名来包裹住JSON数据,这样客户端就能够随意定制本身的函数来自动处理返回数据了。ajax

JSON是一种轻量级的数据传输格式,大部分先后端分离的架构都以JSON格式进行数据的传输。json

JSONP就是用来解决跨域请求问题后端

2.JSONP原理
ajax请求受同源策略影响,不容许进行跨域请求,而script标签src属性中的连接却能够访问跨域的js脚本,利用这个特性,服务端再也不返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。跨域

跨域的原理
       1:使用script 标签发送请求,这个标签支持跨域访问
       2:在script 标签里面给服务器端传递一个 callback
       3:callback 的值对应到页面必定要定义一个全局函数(为何是全局?由于服务端接收到callback函数后会返回页面中的script中去找,若是不写在全局做用域中根本找不到)
       4:服务端返回的是一个函数的调用。调用的时候会吧数据做为参数包在这个函数里面。浏览器



同源策略
浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另外一个源加载的文档的属性。服务器

总结:
就是利用script标签绕过同源策略,得到一个相似这样的数据,jsonpcallback是页面存在的回调方法,参数就是想获得的json。架构

JSONP为何不支持post请求
1.JSONP的优势是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都 能够运行,不须要XMLHttpRequest或ActiveX的支持;而且在请求完毕后能够经过调用callback的方式回传结果。前后端分离

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

3.JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了。
jsonp的本质是:动态建立script标签,而后经过他的src属性发送跨域请求,不一样意而后服务器相应的数据格式为【函数调用foo(实参)】,因此在发送请求以前必须声明一个函数,而且函数的名字与参数中传递的名字要一致。

能够说jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的,由于他的原理实际上就是 使用js的script标签 进行传参,那么必然是get方式的了,和浏览器中敲入一个url同样

原理就是从服务端加载一段脚本(用script标签),而后把数据放到一个函数参数里面,再而后浏览器里定义的那个函数就能拿到那个数据了~因此为啥不能发post 由于标签里只能发get虽然, jsonp 的实现跟 ajax 没有半毛钱关系,jsonp是经过 script的src实现的,可是最终目的都是向服务器请求数据而后回调,并且为了方便,因此jquery把 jsonp 也封装在了 $.ajax 方法中,调用方式与 ajax 调用方式略有区别。

相关文章
相关标签/搜索