今天碰到一个Ajax跨域请求的问题,我把源码down下来,然后在服务器端写了一个http请求的代理(因为服务器端是不存在跨域问题的),说白了就是用BufferedReader写了个IO流,然后读取到目标地址的数据,测试发现OK,但是问题出现在,asp的项目存在IIS里面,而我们的java代码是放在其他服务器的容器中,asp的请求无论如何都是跨域的,我们是无法在IIS里面部署jsp的,所以这个办法行不通。

于是上网查了下,发现可以使用jsonp的方式实现跨域。其实原理也很简单,就是利用<script>标签的src来实现跨域获取数据,而jQuery的Ajax也正好支持并且封装了这种方式,思路是客户端以jsonp的这种方式(协议)向目标服务器发送请求,服务器端构建出一个callback的回调函数,类似JS的方法+参数的字符串返回给客户端,客户端调用自己写好的回调函数来执行这段js代码,于是就实现了跨域请求的目的。

jQuery给出了两种情况的跨域请求,一种是get/getJSON的方式,另一种是$.ajax()的方式,原理都差不多,只是写法不一样,多几行代码而已,多大点事儿,哈哈,于是我在本地服务器上同时运行了2个project,端口分别是8080和8081,在8081的客户端上面请求8080端口的数据,端口不同也是跨域。

 $.getJSON("http://localhost:8080/my/t1.jsp?callback=?",
function(result) {});
 function m1(data) {
alert(data);
}
 $.ajax({
url: "http://localhost:8080my/t1.jsp?callback=?",
dataType: "jsonp",
jsonpCallback: "m1",
success: function(data) {}
});
 function m1(data) {
alert(data);
}

服务器端Java代码:

String str = "{[\"name1\": \"json\",\"name2\": \"json\",\"name3\": \"json\"]}";
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(str);
json = "m1(" + json + ")";
response.getWriter().print(json);
说明:第一种方式的callback=?回调函数标志着Ajax请求是以jsonp的方式发送请求,客户端请求会自动在问号处增加一个方法名,方法名是一jquery开头的一串数字,而第二种方式的是参数dataType="jsonp"来说明是以jsonp的方式发送请求,所以可以直接在callback后面直接指定方法名callback=m1,而不需要jsonpCallback: "m1"这一样代码,其实还是那句话,多一行代码而已,多大点事儿。

jQuery的Ajax的跨域请求的更多相关文章

  1. jQuery的ajax jsonp跨域请求

    了解:ajax.json.jsonp.“跨域”的关系 要弄清楚以上ajax.json.jsonp概念的关系,我觉得弄清楚ajax是“干什么的”,“怎么实现的”,“有什么问题”,“如果解决存在的问题”等 ...

  2. 原生JS实现Ajax及Ajax的跨域请求

      前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...

  3. 利用jquery的ajax实现跨域,内部其实是jsonp协议了,不是XHRhttp协议

    一.同源策略 要理解跨域,先要了解一下“同源策略”.所谓同源是指,域名,协议,端口相同.所谓“同源策略“,简单的说就是基于安全考虑,当前域不能访问其他域的东西. 一些常见的是否同源示例可参照下表: 在 ...

  4. Ajax之跨域请求

    一.引子 我现在开启了两个django项目,分别叫Demo1和Demo2,Demo1中有一个路径‘http://127.0.0.1:8000/index/’,对应的视图是index视图返回一个inde ...

  5. 利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)

    利用Nginx轻松实现浏览器中Ajax的跨域请求(前后端分离开发调试必备神技) 前言 为什么会出现跨域? 造成跨域问题的原因是因为浏览器受到同源策略的限制,也就是说js只能访问和操作自己域下的资源,不 ...

  6. 原生JS实现Ajax的跨域请求

    原生JS如何实现Ajax的跨域请求? 在解决这个问题之前,我们务必先清楚为什么我们要跨域请求,以及在什么情况下会跨域请求. 了解一下:“同源策略”,你就知道了: 同源策略限制从一个源加载的文档或脚本如 ...

  7. jQuery之ajax的跨域获取数据

    如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面.服务 ...

  8. ajax的跨域请求

    同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...

  9. jquery中ajax处理跨域的三大方式

    一.处理跨域的方式: 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已经实现了跨域访问.但ie10以下不支持 只需要在服务端填上响应头: ? 1 2 ...

随机推荐

  1. [BS-21] 关于OC中对象与指针的思考

    关于OC中对象与指针的思考 1. 创建对象: OC中可通过代码Person *p = [[Person alloc] init];创建了一个对象p.该过程中内存情况为: 在当前线程的栈(默认1M)中, ...

  2. Speed-BI云平台正在公测中,欢迎大家体验!

    Speed-BI云平台正在公测中,欢迎大家体验.访问地址:http://speedbi.cn 支持IE(建议IE8以上),Edge,Chrome,Firefox,Safari等任意浏览器,以及采用这几 ...

  3. C# ZedGraph 控件各属性以及示例

    ZedGraph属性\方法介绍 Copy(Boolean) ->> 将图像复制到剪贴板.DoPageSetup()() ->> 打开打印设置对话框. DoPrint()() - ...

  4. JavaScript学习笔记之BOM

    BOM的核心对象是window,它既表示浏览器窗口以及页面可见区域,同时也是ECMAScript中的Globe对象,所有的全局变量和函数都是它的属性,并且所有的原声函数以及其他函数也都存在于它的命名空 ...

  5. 手动内存管理与ARC互相转换问题

  6. Java- 基本封装

    package test.studet_manager; public class Student { static int num = 100; // 编号-->唯一的 private int ...

  7. Silverlight打印注意事项

    1.Silverlight的打印功能从版本5开始才支持矢量打印,这不但要求打印机支持矢量打印,而且还要安装相应的打印驱动程序. 测试你的打印机是否支持矢量打印,可以参考:如何用C#代码检测打印机和驱动 ...

  8. docker note from UC blog

    -------------------------------------------------------------------------- original url http://tech. ...

  9. JAX-WS(三)构建简单webservice部署到tomcat上

    前言: 虽然构建本地的jax-ws的webservice很简单,但要部署到tomcat上要绕过点弯. tomcat本身和jdk都没有jaw-ws的API,所以部署的时候需要额外做点事情,有两种选择 1 ...

  10. GTA项目 二, JSON接口开放跨域访问

    public class CORSAttribute : ActionFilterAttribute { public string Domains { get; set; } public CORS ...