今天碰到一个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. MySQL学习笔记——存储引擎的索引特性

  2. nginx+tomcat实现动静分离

    本文设计的动静分离结构 在本文中,我们将静态资源放在 A 主机的一个目录上,将动态程序放在 B 主机上,同时在 A 上安装 Nginx 并且在 B 上安装 Tomcat.配置 Nginx,当请求的是 ...

  3. 3D Modeling using GDI+

    https://code.msdn.microsoft.com/3D-Modeling-using-GDI-b93937b9 Introduction Most of us use OpenGL/ D ...

  4. python ftplib,smtplib,poplib学习

    一.ftplib from ftplib import FTP ftpobj = FTP(IP或域名)     #实例化对象 ftpobj.login('username','passwd')  ## ...

  5. 当数据库某张表数据发生变化时,更新c#程序中缓存的用法

    参考:http://www.webkaka.com/tutorial/asp.net/2012/111912/(SqlDependency和SqlCacheDependency缓存的用法及具体步骤) ...

  6. Leetcode: Mini Parser

    Given a nested list of integers represented as a string, implement a parser to deserialize it. Each ...

  7. 创建Java类并实例化深入理解

    package com.sanguosha.java; import java.util.Scanner;//导入包 public class TestPerson { public static v ...

  8. mldn android

    ed2k://|file|%E9%AD%94%E4%B9%90%E7%A7%91%E6%8A%80_Android%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98%E7%BB% ...

  9. Android 仿土巴兔选择效果

    1,前两天在群里看到有人在讨论土巴兔的选择装修风格的效果,自己也想实现,果断百度一下,有些好的文章,就花了些时间来分析了下,先看看别人土巴兔原装的功能 2,可以看到,基本上可以使用一个vviewpag ...

  10. MVC Controller弹窗的几种方式

    MVC3 Controller弹窗的几种方式   return Content("<script language='javascript' type='text/javascript ...