Jsonp简介

原文地址：http://www.yanwushu.com/post/21.html

Jsonp要解决的问题

由于同源策略[1]，浏览器不允许跨域请求。比如在www.example1.com域下的网页上使用ajax请求www.example2.com域上的服务，浏览器会报错：Origin xxx is not allowed by Access-Control-Allow-Origin。

先行者们创造了一个方法来试图打破同源策略的限制，完成跨域请求的目的。

原理

<script>元素并没有同源限制，也就意味着一个域上的页面可以引用其他域上的js文件。比如最常见的cdn方式引用js库文件。

将一个跨域的服务url放到<script>元素的src属性值中，那么浏览器将自动向此src指定的服务发送一个get请求，由于浏览器预期返回数据为一段js代码，所以，接到响应数据之后，浏览器会将它直接放到js引擎中执行。

注意

理解原理之后，很容易理解使用jsonp进行跨域请求时，需要注意以下几点：

1.    <Script>元素的src的请求只有get方式，所以目标服务必须支持get方法请求。有的服务器只允许post或者其他http请求方法，这种服务是无法使用jsonp的方式进行跨域请求的。

2.    服务端响应的内容必须是一段可执行的js代码，否则使用jsonp将意义不大。这就是很多人会问为什么使用jsonp接收一个格式正确的json数据，但是浏览器会报语法错误的原因。

使用jsonp方式实现跨域请求

理解原理之后就很容易想到实现方式了，可以手动构建<script>元素，并且添加到document节点中，也可以使用jquery封装的ajax方式实现jsonp请求。使用jquery实现jsonp跨域请求时，只需要将option参数的dataType属性值指定为字符串“jsonp”即可。

资源

[1] https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy