`

ajax跨域实现两种方式

阅读更多
第一种jsonp
js代码:
function ajaxJsonp() {
$.ajax({
url : 'http://192.168.7.58:8081/hello',
type : "GET",
async : false,
dataType : "jsonp",
jsonpCallback : "jsonpCallback",//自定义的jsonp回调函数名,默认为jQuery自动生成的随机函数
jsonp : "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为callback)
success : function(data) {
console.log(data);
                        console.log(data.name);
alert("服务器连接成功 ajax"+data);
},
error : function(data) {
    console.log(data);
                    console.log(data.name);
alert("服务器连接失败 ajax"+data);
}
});
}

java代码:
@RequestMapping("/hello")
@ResponseBody
public String hello(String callback,HttpServletRequest request, HttpServletResponse response, HttpSession session) {
Map<String, Object> map=new HashMap<String, Object>();
map.put("name", "kevin");
return callback+"("+JSONObject.fromObject(map).toString()+");";
}
第二种CROS方式
js代码
function test(){
$.ajax({
url : 'http://192.168.7.58:8081/hello',
type : "GET",
// async : false,
success : function(data) {
console.log(data);
                        var obj=JSON.parse(data)
console.log(obj.name);
alert("服务器连接成功 ajax"+data);
},
error : function(data) {
console.log(data);
                        var obj=JSON.parse(data)
console.log(obj.name);
alert("服务器连接失败 ajax"+data);
}
});
    }
java代码:
@RequestMapping("/hello")
@ResponseBody
public String hello(String callback,HttpServletRequest request, HttpServletResponse response, HttpSession session) {
response.setHeader("Access-Control-Allow-Origin", "*" );
response.setHeader("Access-Control-Allow-Methods","GET,POST");
Map<String, Object> map=new HashMap<String, Object>();
map.put("name", "kevin");
return callback+"("+JSONObject.fromObject(map).toString()+");";
}

或者合起来写java代码:
@RequestMapping("/hello")
@ResponseBody
public String hello(String callback,HttpServletRequest request, HttpServletResponse response, HttpSession session) {
Map<String, Object> map=new HashMap<String, Object>();
map.put("name", "kevin");
if (callback!=null&&callback.trim().length()>0) {
return callback+"("+JSONObject.fromObject(map).toString()+");";
} else {
response.setHeader("Access-Control-Allow-Origin", "*" );
response.setHeader("Access-Control-Allow-Methods","GET,POST");
return JSONObject.fromObject(map).toString();
}
}
分享到:
评论

相关推荐

    Javascript跨域和Ajax跨域解决方案

    JavaScript跨域和Ajax跨域是Web开发中常见的问题,尤其在进行前后端分离或API调用时,由于浏览器的同源策略限制,不同域名、协议或端口的资源请求会被阻止,这就是所谓的“跨域”。本文将深入探讨JavaScript和Ajax...

    怎样实现Ajax 跨域访问

    本文将详细介绍五种实现Ajax跨域访问的方法。 #### 一、使用JSONP(JSON with Padding) JSONP是一种常用的跨域数据获取方式,其原理是利用`&lt;script&gt;`标签没有跨域限制的特点来实现跨域请求。请求时,在URL中添加...

    Ajax跨域访问解决方案

    总结来说,解决Ajax跨域访问问题有多种途径,选择哪种方式取决于具体需求、服务器支持以及安全性考虑。理解并掌握这些方法,能帮助开发者更好地应对实际项目中的跨域挑战。在开发过程中,确保遵循最佳实践,既能保障...

    JQury实现Ajax跨域访问

    总结来说,jQuery通过JSONP和CORS两种方式实现了Ajax的跨域访问。开发者可以根据实际需求选择合适的方法,同时注意安全性,确保数据交互的顺利进行。在具体实践中,可以参考提供的博客链接(已给出但无法点击,请...

    Jquery跨域Ajax请求测试

    通过学习和运行这个示例,开发者可以更好地理解和掌握跨域请求的实现方式,并将其应用到自己的Web应用中。 总之,jQuery提供了一种简单易用的方式来处理跨域Ajax请求,无论是通过JSONP还是CORS。理解并熟练掌握这些...

    ajax跨域实例

    ajax跨域实例 Ajax 跨域操作是指在不同的域名、协议或端口之间进行 Ajax 请求的操作。由于浏览器的同源策略限制,跨域操作需要在前端和服务端指定共同规则,以便实现安全的数据交换。在本文中,我们将讨论两个 ...

    解决ajax跨域问题

    为了解决AJAX跨域问题,开发者可以采用以下几种策略: 1. JSONP(JSON with Padding) JSONP是一种绕过同源策略的方法,它利用了`&lt;script&gt;`标签不受同源策略限制的特点。JSONP的工作原理是服务器提供一个可被调用的...

    cors技术解决ajax跨域

    **CORS技术详解:解决AJAX跨域问题** 在Web开发中,由于浏览器的同源策略限制,AJAX请求只能向同一源(协议+域名+端口)发送,这在跨域请求时会遇到障碍。为了解决这个问题,CORS(Cross-Origin Resource Sharing,...

    ajax处理跨域请求

    总结来说,通过jQuery的AJAX处理跨域请求,主要依赖于CORS和JSONP两种方式。CORS更强大,支持更多类型的请求,但需要服务器配合设置相应头部;JSONP则简单易用,适用于只需GET请求的情况。在实际项目中,开发者应...

    JAVA的AJAX跨域访问

    解决跨域问题的主要方法有两种:CORS(Cross-Origin Resource Sharing)和JSONP(JSON with Padding)。在Java环境中,我们主要关注CORS的实现方式。 - **CORS**:CORS是一种基于HTTP头来允许浏览器与不同源的...

    Ajax跨域访问(ASP.NET Web)

    Ajax跨域访问是Web开发中常见的需求,可以通过JSONP或CORS来实现。在ASP.NET Web中,可以方便地配置服务器以支持这些跨域解决方案。同时,需要注意安全问题,防止恶意网站利用跨域访问获取或篡改数据。

    ajax跨域请求

    JSONP和CORS是两种主要的实现方式,前者适用于简单的GET请求,后者则提供更全面的安全控制。jQuery等库则为我们简化了跨域请求的实现过程。通过研究`AJAX1`和`AJAX2`,可以加深对这些概念的理解,并提高开发技能。

    ajax 跨域请求问题 jquery jsonp

    **Ajax跨域请求问题与jQuery JSONP解析** 在Web开发中,Ajax技术被广泛用于实现页面的异步更新,但浏览器的同源策略(Same-Origin Policy)限制了Ajax请求只能向同源(协议、域名、端口均相同)的服务器发送。这在...

    有关Ajax跨域问题的两种解决方法

    Ajax跨域是前端开发中常见的问题,本文描述了以Google浏览器Chrome作为客户端和以Tomcat作为Web服务器的情况下的解决办法。 问题现象 当出现跨域访问的时候ajax通常会报类似如下错误: XMLHttpRequest cannot load ...

    jsonpajax跨域请求

    JSONP(JSON with Padding)和AJAX是两种常见的在JavaScript中实现跨域数据请求的技术。在Web开发中,由于浏览器的同源策略限制,JavaScript不能直接向其他域名发送请求,但JSONP和AJAX通过特定的方式绕过了这个限制...

    JSONP实现Ajax跨域访问

    ### JSONP实现Ajax跨域访问 #### 一、引言 JSONP(JSON with Padding)是一种用于解决跨域数据访问的技术。由于同源策略(Same-Origin Policy)的存在,JavaScript/Ajax只能请求同源的资源,这给需要跨域访问数据...

    juery mobile使用ajax跨域请求服务器的小实例

    在Web开发中,jQuery Mobile和Ajax是两个非常重要的工具,特别是在构建移动应用或者增强网页交互性时。jQuery Mobile是一款强大的框架,它优化了移动设备上的HTML5应用,提供了丰富的组件和触摸友好的用户界面。而...

    ajax跨域问题的解决办法.rar

    总结,解决Ajax跨域问题有多种方法,选择哪种取决于项目需求和安全考虑。JSONP适用于简单请求,CORS更灵活但需要服务器配合,代理服务器则可以完全绕过同源策略,而`document.domain`适用于同一顶级域名下的跨子域...

    Ajax跨域问题 解决方案

    ### Ajax跨域问题解决方案 #### 一、什么是Ajax跨域 **原理:** Ajax跨域问题的核心在于浏览器的“同源策略”。同源策略是一种安全措施,用于限制一个域名下的文档或脚本如何与另一个来源的资源进行交互。简单来说...

Global site tag (gtag.js) - Google Analytics