JSONP跨域详解
https://www.jianshu.com/p/e1e2920dac95
JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议
允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了
实现步骤
1. 客户端
- 定义获取数据后调用的回调函数
- 动态生成对服务端JS进行引用的代码
- 设置
url为提供jsonp服务的url地址,并在该url中设置相关callback参数 - 创建
script标签,并设置其src属性 - 把
script标签加入head,此时调用开始。
- 设置
2. 服务端
将客户端发送的
callback参数作为函数名来包裹住JSON数据,返回数据至客户端。AJAX与JSONP的异同
- AJAX和JSONP这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个
url,然后把服务器返回的数据进行处理,因此jQuery和extjs等框架都把JSONP作为AJAX的一种形式进行了封装; - 但AJAX和JSONP其实本质上是不同的东西。AJAX的核心是通过
XmlHttpRequest获取非本页内容,而JSONP的核心则是动态添加script标签来调用服务器提供的js脚本。 - 所以说,其实AJAX与JSONP的区别不在于是否跨域,AJAX通过服务端代理一样可以实现跨域,JSONP本身也不排斥同域的数据的获取。
- 还有就是,JSONP是一种方式或者说非强制性协议,如同AJAX一样,它也不一定非要用JSON格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用JSONP提供公开服务。
- AJAX和JSONP这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个