jquery ajax 跨域

本文深入探讨了使用jQuery进行远程数据调用的方法,包括GET请求、JSONP机制及其实现细节。

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


function testRemote(){
$.ajax({
type : "get",
async:false,
url : "http://192.168.30.36:8080/JavaScriptTools/remoteServlet",
data: {
timeStamp: new Date().getTime(),
password:"123456",
loginName:"changchao"
},
dataType : "jsonp",
jsonp: "callbackparam",//服务端用于接收callback调用的function名的参数
jsonpCallback:"success_jsonpCallback",//callback的function名称
success : function(json){
alert(json);
alert(json[0].name);
},
error:function(){
alert('fail');
}
});
}




response.setContentType("text/html");

String callbackFunName = request.getParameter("callbackparam");

response.getWriter().print(callbackFunName + "([ { 'name':'John'}])");

response.getWriter().flush();

response.getWriter().close();

### 解决方案概述 当使用 jQuery 发起 AJAX 请求时,如果目标 URL 属于不同源,则会触发浏览器的安全机制,阻止请求完成。为了克服这一限制,可以采用 JSONP 或 `$.getScript` 方法来处理请求[^1]。 ### 使用 JSONP 进行请求 JSONP 是一种通过 `<script>` 标签加载 JavaScript 文件的方式,它允许开发者绕过同源策略限制。在 jQuery 中可以通过设置 `dataType` 参数为 `"jsonp"` 来启用此功能: ```javascript $.ajax({ url: "https://api.example.com/data", dataType: 'jsonp', success: function(response){ console.log('Data received:', response); }, error: function(xhr, status, error){ console.error('Error occurred:', xhr.responseText || error); } }); ``` 这种方法仅适用于 GET 请求,并且服务端需支持返回带有回调函数包裹的数据结构。 ### 利用 $.getScript 执行脚本形式的请求 另一种替代方案是利用 `$.getScript()` 函数直接加载并执行远程服务器上的 JS 文件。这种方式同样依赖于被访问的服务提供有效的响应内容: ```javascript $.getScript("https://example.com/path/to/script.js", function(data, textStatus, jqxhr) { console.log('Script loaded and executed.'); // 可在此处操作由 script.js 提供的功能或变量 }); ``` 需要注意的是,上述两种方法都要求对方服务器配合配置相应的接口以适应客户端的需求[^2]。 ### CORS 配置作为更通用的选择 除了以上提到的技术外,在现代 Web 开发环境中更为推荐的做法是由后端开启 CORS (Cross-Origin Resource Sharing),这是一种 HTTP 头部字段定义了哪些来源能够获得特定资源访问权限的标准协议。一旦启用了 CORS 支持,就可以像平常一样发起普通的 XMLHttpRequests 而不必担心问题[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值