jsonp跨域原理

最新推荐文章于 2025-05-27 17:57:47 发布

原创最新推荐文章于 2025-05-27 17:57:47 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

跨域同时被 2 个专栏收录

1 篇文章

订阅专栏

jsonp

1 篇文章

订阅专栏

本文介绍了一种利用HTML表单元素的src属性实现跨域请求的方法——JSONP。通过客户端定义回调函数并动态插入script标签请求数据，服务器响应特定格式的JSON数据，最终完成跨域数据传输。

jsonp跨域请求是借助于表单元素的"src"属性的"跨域"实现的，具体实现如下：

1、html页面

<html>  
    <head>  
     <title></title>  
    </head>  
    <body> 
 
   
    <script>  
		var url = "http://localhost:7778/api/test?callbackname=callback";   
		var script = document.createElement('script');   
		script.setAttribute('src', url);  //load javascript   	
		document.getElementsByTagName('head')[0].appendChild(script);   
  
		//回调函数  
		function callback(data){  
			alert(data.name);
			//var html=JSON.stringify(data.name);  
		} 
	</script>		
    </body>  
</html>

2、服务端代码

@RestController
@RequestMapping(value = "/api")
public class JsonpController {

	protected final Logger logger = LoggerFactory.getLogger(this.getClass());

	@RequestMapping(value = "/test", method = RequestMethod.GET)
	public Object view() {
 
	 System.out.println("callback({\"id\":1,\"name\":\"test\"})");
		return "callback({\"id\":1,\"name\":\"test\"})";
	}

}

jsonp和ajax并无关系，只是借助了src属性的"跨域"特性来实现的（json）数据的传输，当服务器返回的数据是以：foo(data)格式返回时，而此时客户端刚好有一个名为foo的函数，则浏览器便会去调用foo函数，而服务端的数据data以参数的形式完成了向客户端的传递，浏览器以此种方式实现了远程跨域调用