发生AJAX跨域的原因：
- 浏览器限制
- 跨域
- XHR（XMLHttpRequest）请求
跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的，html本身没有跨域问题，比如<a>、<script>、<img> 几乎所有有src属性的都能进行跨域访问。
如何解决跨域问题
1、JSONP
JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
2、添加响应头，允许跨域
addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问 addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式3、代理的方式
服务器A的test01.html页面想访问服务器B的后台action，返回“test”字符串，此时就出现跨域请求，浏览器控制台会出现报错提示，由于跨域是浏览器的同源策略造成的，对于服务器后台不存在该问题，可以在服务器A中添加一个代理action，在该action中完成对服务器B中action数据的请求，然后在返回到test01.html页面。
Demo1(添加允许跨域请求的响应头)
html页面
Web后台
现在用添加响应头的方式
Demo2(jsonp的callback方式)
这里演示的是jquery的ajax
$(document).ready(function(){ var url='http://localhost:8080/WorkGroupManagment/open/getGroupById" +"?id=1&callback=?'; $.ajax({ url:url, dataType:'jsonp', processData: false, type:'get', success:function(data){ alert(data.name); }, error:function(XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); }}); }); 比较一下json与jsonp格式的区别：
json格式：
{ "message":"获取成功", "state":"1", "result":{"name":"工作组1","id":1,"description":"11"}} jsonp格式：
callback({ "message":"获取成功", "state":"1", "result":{"name":"工作组1","id":1,"description":"11"}}) 后台java代码最终如下：
@RequestMapping(value = "/getGroupById") public String getGroupById(@RequestParam("id") Long id, HttpServletRequest request, HttpServletResponse response) throws IOException { String callback = request.getParameter("callback"); ReturnObject result = null; Group group = null; try { group = groupService.getGroupById(id); result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS); } catch (BusinessException e) { e.printStackTrace(); result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED); } String json = JsonConverter.bean2Json(result); response.setContentType("text/html"); response.setCharacterEncoding("utf-8"); PrintWriter out = response.getWriter(); out.print(callback + "(" + json + ")"); return null; } jquery-jsonp插件的方式
var url="http://localhost:8080/WorkGroupManagment/open/getGroupById" +"?id=1&callback=?";$.jsonp({ "url": url, "success": function(data) { $("#current-group").text("当前工作组:"+data.result.name); }, "error": function(d,msg) { alert("Could not find user "+msg); }});
参考：
Jsonp的使用方式，可以参考，
Jspon优缺点可以参考