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" οnlοad="jsonpComplete()" οnerrοr="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数据传入，即达到跨域访问的效果。