1.什么是JSONP
为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住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 调用方式略有区别。