解决浏览器跨域限制方案之JSONP

2023-07-30 10:09:28

一.什么是JSONP

JSONP即：JSON with Padding，是一种解决因浏览器跨域限制不允许访问跨域资源的方法。

JSONP是一个非官方的协议，它允许在服务器端返回javascript标签到浏览器，在浏览器端通过调用javascript函数的形式实现访问跨域资源或数据。

二.JSONP和JSON的关系

JSONP是一种解决因浏览器跨域限制不允许访问跨域资源的方法；而JSON是一种数据格式，与xml类似。

虽然二者在字面上都含有关键字“JSON”，但实际上他们之间没有任何关系。

通过JSONP获取到的跨域数据是javascript对象，而非JSON对象，所以避免了数据解析这个过程。

三.JSONP的原理

本质上来讲，JSONP解决访问跨域资源的方法，与直接使用<script>标签引用资源是一样的。

原因在于：使用JSONP访问跨域数据时，就是需要在DOM中动态创建<script>标签，并设置src属性访问指定资源。

差别在于：通过JSONP获取到的返回数据是一个函数调用，数据以参数的形式传递给函数；而<script>标签返回的是引用的资源内容。

四.实战示例

1.前端代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

</head>

<body>

	<h2>验证使用JSONP方式发送跨域请求</h2>

	<div>

		<input type="button" value="发送请求" onclick="ajaxJsonp()">

	</div>

</body>

<script type="text/javascript">

	// 前端通过动态创建javascript标签的方式发送请求

	function ajaxJsonp() {

		var url = "http://localhost:8081/jsonp?callback=jsonpcall";

		var script = document.createElement('script');

	  	script.setAttribute("type","text/javascript");

	  	script.src = url;

	  	document.body.appendChild(script);

	}

    // jsonp返回数据时调用的函数,数据以参数形式传递

	function jsonpcall(data) {

		console.log("do response jsonp data");

		console.log(data);

	}

</script>

</html>

2.服务端代码

/**

 * 使用JSONP方式处理跨域GET请求

 * @param req

 * @param resp

 * @param callback 回调函数名称

 * @return

 */

@RequestMapping(value = "/jsonp", method = RequestMethod.GET)

@ResponseBody

public Object testAjaxJsonp(HttpServletRequest req, HttpServletResponse resp,

        @RequestParam("callback") String callback) {

    JSONObject json = new JSONObject();

    json.put("name", "jsonp");

    json.put("pwd", "");

    // 将数据作为函数的参数返回给浏览器,如: jsonpcall({"name":"jsonp","pwd":""})

    return new StringBuffer().append(callback).append("(").append(json).append(")");

}

【参考】
http://www.nowamagic.net/librarys/veda/detail/224 JSONP跨域的原理解析
http://www.xiaoxiaozi.com/2011/11/25/2239/ JSONP与POST方式请求
http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 说说JSON和JSONP
http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html 深入浅出JSONP--解决ajax跨域问题

码农公寓