JSONP跨域原理

JSONP跨域相关问题

问题起源：

​ 由于同源策略，AJAX直接请求非同源数据接口存在跨域无权限访问的问题。

JSONP跨域原理：

​ 利用了src不受同源策略的影响 ，可以访问非同源的数据。

源生JS实现JSONP的步骤：

客户端

1. 定义获取数据后调用的回调函数
2. 动态生成对服务端JS进行引用的代码
   • 设置url为提供jsonp服务的url地址，并在该url中设置相关callback参数
   • 创建script标签，并设置其src属性
   • 把script标签加入head，此时调用开始。

服务端

将客户端发送的callback参数作为函数名来包裹住JSON数据，返回数据至客户端。

AJAX与JSONP的异同：

1. AJAX和JSONP这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jQuery和extjs等框架都把JSONP作为AJAX的一种形式进行了封装；
2. 但AJAX和JSONP其实本质上是不同的东西。AJAX的核心是通过XmlHttpRequest获取非本页内容，而JSONP的核心则是动态添加script标签来调用服务器提供的js脚本。
3. 所以说，其实AJAX与JSONP的区别不在于是否跨域，AJAX通过服务端代理一样可以实现跨域，JSONP本身也不排斥同域的数据的获取。
4. 还有就是，JSONP是一种方式或者说非强制性协议，如同AJAX一样，它也不一定非要用JSON格式来传递数据，如果你愿意，字符串都行，只不过这样不利于用JSONP提供公开服务。
5. 总而言之，JSONP不是AJAX的一个特例，哪怕jQuery等巨头把它封装进了AJAX，也不能改变这一点！

最后，

JSONP跨域只支持get方式的跨域，post是不支持的。
一个JSONP跨域的例子。