`

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();
}
}
分享到:
评论

相关推荐

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

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

    spring boot ajax跨域的两种方式

    java语言在多数时,会作为一个后端语言,为前端的php,node.js等提供API接口。这篇文章主要介绍了spring boot ajax跨域的两种方式,非常不错,具有参考借鉴价值,需要的朋友可以参考下

    Ajax通过代理跨域访问

    Ajax通过代理来解决跨域访问获取数据,里面描述了两种跨域访问的解决方法

    jsonp json ajax跨域调用

    说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服务器端代理...

    详解js跨域请求的两种方式,支持post请求

    JSONP实现跨域 常用的jquery实现跨域调用 $.ajax({ url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php", dataType: "jsonp", jsonp: "callback", context: document.body, success: ...

    Ajax 跨域如何实现

    ajax简介 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。...前两天xz问我知不知道ajax怎么实现跨域调用,因为没听过这个概念,所以也知道怎

    AJAXCDR:利用 Flash 完美解决 JavaScript 和 AJAX 跨域 HTTP POST/GET 表单请求

     iframe、JS创建动态脚本这两种方法,需要开发者能控制两个域,两端都要编写相应的代码,非常麻烦。在本域服务器上用PHP写个代理中转程序,让本域PHP程序去读取远程其他域的数据再返回给自己,是常用的方法。但是,...

    详解ajax跨域问题解决方案

    通常来说,比较通用的有如下两种方式,一种是从服务器端下手,另一种则是从客户端的角度出发。二者各有利弊,具体要使用哪种方式还需要具体的分析。 服务器设置响应头 服务器代理 客户端采用脚本回调机制。 方式...

    AJAX的跨域访问-两种有效的解决方法介绍

    本篇文章是对AJAX的跨域访问-两种有效的解决方法进行了详细的分析介绍,需要的朋友参考下

    jquery的ajax和getJson跨域获取json数据的实现方法

    很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端...1、通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的。 jsonp是英文json with padding的缩写。它允许在服务器端生成

    HTML5中使用postMessage实现Ajax跨域请求的方法

    由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等。 常规的几种解决方法: (1) document.domain+iframe;(2) 动态创建script; (3) iframe+location.hash; (4) flash。 ...

    九种跨域方式实现原理

    前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容。同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。...

    解决 springboot跨域请求问题

    springboot做前后端分离,ajax跨域请求问题 前后端分离:即将后端服务层与前端展示层分别开发和部署,因而产生两个需要打包发布的项目, 将两个分别部署后,前端再去请求后端就会产生跨域请求的问题。 两种解决方案

    Ajax跨域问题的解决办法汇总(推荐)

    本篇将讲述一个小白从遇到跨域不知道是跨域问题,到知道是跨域问题不知道如何解决,再到解决跨域问题,最后找到两种方法解决ajax 跨域问题的全过程。 不知是跨域问题 起 因是这样的,为了复用,减少重复开发,单独...

    跨域请求两种方法 jsonp和cors的实现

    // 原理: ajax 不能直接跨域 。 //向html中加入script标签 含有访问路径,script标签直接访问路径达到效果 $('.get_service2').click(function () { // 伪造ajax提交请求 $.ajax({ url:'...

    如何快速解决JS或Jquery ajax异步跨域的问题

    简单的概括下,解决办法有两种。 一种是jsonp方式:即在前端发送异步请求时,添加相关的jsonp设置或配置;后端则返回可供jsonp解析的格式的串。  但是jsonp方式只支持get的请求方式,并且不被新浏览器版本的支持...

    跨域访问---------

    在前后端开发过程中一直会伴随我们的问题就是跨域问题,因为这时候前端和后端的代码是在不同机器上运行的,两个地址不在一个域名下,这个时候前端脚本在进行ajax访问的时候浏览器就会报跨域相关的错误。这个时候怎样...

Global site tag (gtag.js) - Google Analytics