今天碰到一个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. jenkins邮件模板

    步骤 1.在jenkins主目录中新建一个模板文件夹 命名为:email-templates 3.把模板代码放入到模板文件夹  with_results.groovy 4.设置邮件发送模板配置 5.配 ...

  2. angularjs 获取地址传参

    .controller('CityCtrl', function ($scope, $location,$ionicModal) { 注入location服务 $scope.name = $locat ...

  3. 第六篇 SQL Server安全执行上下文和代码签名

    本篇文章是SQL Server安全系列的第六篇,详细内容请参考原文. SQL Server决定主体是否有必要的执行代码权限的根本途径是其执行上下文规则.这一切都可能复杂一个主体有执行代码的权限,但是却 ...

  4. python_中文乱码问题

    1. 编码和解码的概念:    编码是将源对象内容按照一种标准转换为一种标准格式内容.    解码是和编码对应的,它使用和编码相同的标准将编码内容还原为最初的对象内容. 2. python中的编码和解 ...

  5. Vue.2.0.5-深入响应式原理

    大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue 最显著的一个功能是响应系统 -- 模型只是普通对象,修改它则更新视图.这会让状态管理变得非常简单且直观,不过理解它的原理以避免一些常见的陷阱也 ...

  6. UISwitch属性

    1.onTintColor 处于on时switch 的颜色     switchImage.onTintColor = [UIColor grayColor]; 2.tintColor 处于off时s ...

  7. Java基础之处理事件——添加工具栏(Sketcher 7 with File toolbar buttons)

    控制台程序. 工具栏在应用程序窗口中通常位于内容面板顶部的菜单栏下,包含直接访问菜单选项的按钮.在Sketcher程序中可以为最常用的菜单项添加工具栏. 工具栏是javax.swing.JToolBa ...

  8. PAT 解题报告 1049. Counting Ones (30)

    1049. Counting Ones (30) The task is simple: given any positive integer N, you are supposed to count ...

  9. Struts2配置文件各种标签的含义

    最近正在学习Struts2,在配置文件中遇到好多标签,各种意义不同.为了方便学习,便把各种标签的书写和含义总结如下:(随时更新)   <struts>     <!-- 开启使用开发 ...

  10. [Reprint]C++函数前和函数后加const修饰符区别

    c++中关于const的用法有很多,const既可以修饰变量,也可以函数,不同的环境下,是有不同的含义.今天来讲讲const加在函数前和函数后面的区别.比如: 01 #include<iostr ...