自己写个jsonp例子

本文介绍了一个JSONP跨域请求的示例,包括服务器端如何构造JSONP响应及前端如何使用jQuery发起请求并处理返回的数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

服务器端代码:

/**
	 * 返回jsonp测试
	 * @return
	 * @throws Exception
	 */
	public View getJson() throws Exception {
		
		String action = StringUtil.dealParam(request.getParameter("callback"));
		
		Map<String, Object> data = new HashMap<String, Object>();
		
		if (action.equals("getUserinfo")) {
			data.put("name", "zheng");
			data.put("sex", "1");
			data.put("phone", "13987654321");
		}
		
		return new TextView(action + "(" + new JsonView(data) + ")");
	}

 

前段js代码:

$(function() {
		var url = "http://192.168.1.23:8888/ad/getJson";
		$.ajax({
			dataType: "jsonp", 
			jsonp:"callback",
			jsonpCallback : "getUserinfo",
			url: url,
			success: function (json) {
				alert(json.name);
			},
			error: function (xhr, status, ex) {
				
			}
		});
	});

 

### 什么是 JSONP JSONP 是一种通过 `<script>` 标签绕过浏览器同源策略限制的技术[^1]。它并不是真正的 AJAX 请求,而是利用了 `<script>` 标签可以从不同域名加载 JavaScript 文件的能力。JSONP 的核心在于动态创建一个 `<script>` 元素并将目标 URL 设置为其 `src` 属性。 JSONP 只能发送 GET 请求,并依赖于服务器返回的数据格式为回调函数的形式。这种机制允许前端开发者从外部资源获取数据并处理响应内容。 --- ### 如何使用 JSONP 进行跨域请求 #### 客户端实现 在客户端,可以通过手动构建 `<script>` 标签或者借助库(如 jQuery)来发起 JSONP 调用。以下是两种常见的实现方式: 1. **纯 JavaScript 实现** 下面是一个简单的例子展示如何手工编 JSONP 请求: ```javascript function handleResponse(data) { console.log('Server response:', data); } const script = document.createElement('script'); script.src = 'https://example.com/api?callback=handleResponse'; document.body.appendChild(script); ``` 上述代码会向指定的 URL 发起请求,并期望服务器返回如下形式的内容: ```javascript handleResponse({"key": "value"}); ``` 2. **基于 jQuery 的实现** 如果使用 jQuery 库,则可以更方便地完成 JSONP 请求。例如: ```javascript $.ajax({ url: 'https://example.com/api', dataType: 'jsonp', // 声明这是一个 JSONP 请求 success: function(response) { console.log('Data received via JSONP:', response); } }); ``` 此外,jQuery 提供了一个简化版的方法——`$.getJSON()`,也可以用来快速实现 JSONP 功能[^3]。 #### 服务端支持 为了使 JSONP 工作正常,服务端需要特别配置以接受带有 `callback` 参数的请求,并将结果包裹在一个由该参数定义的名字所指代的函数调用之中[^2]。比如,假设接收到这样的查询字符串 `/api?callback=jsonCallbackFunction` ,那么应该生成类似下面结构的回答: ```javascript jsonCallbackFunction({ "status": "success", "message": "This is a cross-domain message." }); ``` 需要注意的是,由于 JSONP 使用全局作用域中的函数名作为回调入口点,所以可能存在安全性隐患,容易遭受 XSS 攻击等问题。因此,在实际开发过程中应尽量避免使用此技术,转而采用更加现代化的安全解决方案,像 CORS (Cross-Origin Resource Sharing)。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值