JSONP

JSONP是什么

JSONP是通过动态创建<script>标签实现跨域数据访问的一种方法，JSON+Padding的缩写就是JSONP，但是，JSONP获得的数据并不一定是JSON，而是所有JavaScript。

JSONP到底是什么

请求方：网站A的前端（浏览器）
响应方：网站B的后端（服务器）

1. 请求方动态创建<script>标签，<script>的src指向响应方，并且传一个查询参数?callback=xxx
2. 响应方接受请求，根据查询参数callback=xxx构建形如： xxx.call(undefined, '请求的数据') 的响应
3. 请求方接受响应，并且执行 xxx.call(undefined, '请求的数据')
4. 请求方就得到了想要的数据

另：一般情况下，查询参数xxx会被取名为一个随机数，如：wky123056123

  let script = document.createElement('script')
  script.src = 'http://jack.com:8002?callback=' + functionName
  document.body.appendChild(script)
  let functionName = 'wky' + parseInt(Math.random()*1000000, 10)
  window[functionName] = function(result){
    alert(result)
  }
  script.onload = function(e){
    e.currentTarget.remove()
  }
  script.onerror = function(e){
    e.currentTarget.remove()
  }

通过jQuery实现JSONP

 $.ajax({
    url: "http://jack.com:8002",
    jsonp: "callback",
    dataType: "jsonp",
    success: function( response ) {
    alert( response )
  }
})

JSONP的缺点

1. 由于JSONP通过动态创建<script>来发送请求，因此JSONP并不支持POST请求，因为<script>不支持POST请求
2. 同样由于JSONP动态创建<script>，所以JSONP部署的网站很容易遭受跨网站的伪造要求（CSRF/XSRF）的攻击，因为 HTML <script> 标签在浏览器里不遵守同源策略，恶意网页可以要求并取得属于其他网站的 JSON 资料。