AJAX跨域请求

本文介绍了一种使用jQuery发起JSONP跨域请求的方法,并展示了如何在JAVA服务器端进行响应处理。通过设置HTTP头及回调函数参数实现跨域访问。

JS请求:

 

$(function(){
var d = new Date();
var url = '其他域请求地址';
$.ajax({
    url: url,
    type: 'GET',
    crossDomain: true,
    success: function(data) { 
		alert(data);//处理返回数据
	},
    error: function() { alert('Failed!'); },
	dataType: 'jsonp',
	jsonp:'callbackparam',//向服务器
	jsonpCallback:'success_jsonpCallback'//回调方法名
});

var success_jsonpCallback=function(data){}
});

 JAVA服务器响应:

 

response.setContentType("application/json;charset=UTF-8"); //这里的格式是json
response.setHeader("Cache-Control","no-cache");
String limit = request.getParameter("limit");
String jsoncallbackname = request.getParameter("callbackparam");

PrintWriter out = response.getWriter();
out.print(jsoncallbackname+"("+toJson(result)+")");
out.flush();
### AJAX 请求的实现方式 #### 什么是是指当一个资源试图从不同的源加载另一个资源时发生的限制行为。这种限制是由浏览器的安全机制——同源策略引起的,该策略规定只有协议、主机名和端口号完全相同的两个页面才能互相访问数据[^3]。 #### CORS 的工作原理 CORS 是一种基于 HTTP 头部的标准解决方案,用于实现在不同源之间安全地共享资源。通过在服务端设置特定的响应头字段,比如 `Access-Control-Allow-Origin`,可以指定哪些源被允许访问资源[^1]。例如,在 Java Servlet 中可以通过如下代码来配置: ```java response.setHeader("Access-Control-Allow-Origin", "http://example.com"); ``` 上述代码表示只允许来自 `http://example.com` 名下的请求访问当前资源[^2]。 #### JSONP 的工作机制 JSONP (JSON with Padding) 并不是真正意义上的技术,而是一种利用 `<script>` 标签不受同源策略限制的特点绕过的方法。其核心思想是在客户端动态创建一个 `<script>` 元素,并将其 src 属性指向目标 URL,同时传递回调函数名称作为参数给服务器。服务器返回的数据会包裹在这个回调函数里执行[^4]。 下面展示了一个简单的 JSONP 请求例子: ```javascript function handleResponse(data){ console.log('Data received:', data); } var script = document.createElement('script'); script.src = 'https://another-domain.com/api?callback=handleResponse'; document.body.appendChild(script); ``` 需要注意的是,JSONP 只支持 GET 方法,无法满足更复杂的交互需求。 #### 总结两种方法的区别与适用场景 | 特性/方法 | 支持HTTP动词种类 | 安全性保障 | 浏览器兼容情况 | | --- | --- | --- | --- | | **CORS** | 所有(GET, POST, PUT etc.) | 高;依赖于现代浏览器的支持以及正确的头部设定 | 较好,主流浏览器均支持 | | **JSONP** | 单一(仅限GET) | 低;因为它是通过注入脚本的方式完成调用 | 极佳,几乎所有环境都可运行 | 因此对于安全性要求较高或者需要使用多种 HTTP 动词的应用来说推荐采用 CORS 方案;而对于那些只需要简单获取远程数据且需考虑老旧浏览器兼容性的项目,则可以选择 JSONP。 ### 示例代码片段 以下是使用 jQuery 发起 CORS 请求的一个实例: ```javascript $.ajax({ url: "https://api.example.com/data", type: 'GET', dataType: 'json', success: function(response){ alert(JSON.stringify(response)); }, error:function(xhr,status,errorThrown){ alert("Error occurred while fetching the data."); } }); ``` 此段代码展示了如何借助第三方库简化异步通信过程并处理可能遇到的各种状态变化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值