jsonp

jsonp

前言

在前端开发中，如果需要跨域请求怎么办？我们知道浏览器的同源策略不允许跨域，那么script标签，img标签，iframe标签呢？是可以跨域请求资源的，但仅限于get请求，那么我们就利用script标签来干些事情吧。

前端代码

<script type="text/javascript">  function jsonpError(){alert('jsonpError');  }function jsonpComplete(){alert('jsonpComplete');  }    function jsonpSuccess(result) {          alert('jsonpSuccess');      }  </script>  <script type="text/javascript" onload="jsonpComplete()" onerror="jsonpError()" src="http://localhost:8080/new/lib/test.jsonp?callback=jsonpSuccess"></script>

服务器返回的数据

jsonpSuccess({"data":"test"});

说明

1、前端通过script标签发送跨域请求并带上参数callback；

2、服务器想要返回json数据为{"data":"test"}，那么该怎么正确返回给前端呢？从请求中获取到参数callback的值为jsonpSuccess，组装成jsonpSuccess({"data":"test"})并返回。

3、script标签加载完成后会执行jsonpSuccess方法将json数据传入，即达到跨域访问的效果。