参考地址:http://www.cnblogs.com/sunxucool/p/3433992.html
前台ajax异步请求,经常会遇到跨域请求数据,无返回的情况。何为跨域呢请求,如果在A网站中,我们希望使用Ajax来获得B网站中的特定内容,如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题。Ajax的跨域访问问题是现有的Ajax开发人员比较常遇到的问题,一般会用jQuery的jsonp来解决。
jsonp是jQuery 一个专门用来解决跨域问题的类;
比较一下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"} })
看出来区别了吧,在url中callback传到后台的参数是神马callback就是神马,jsonp比json外面有多了一层,callback()。这样就知道怎么处理它了。于是修改后台代码。
下面我们用一台机器的两个不同的tomcat来模拟跨域请求,开启两个tomcat端口分别为8080和8013。
端口为8080的tomcat作为服务器,器servlet代码如下:
package com.servlet; import java.io.IOException; import java.io.Writer; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.json.JSONException; import org.json.JSONObject; public class KuaYuTestServlet extends HttpServlet { public KuaYuTestServlet() { super(); } public void destroy() { super.destroy(); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { Writer writer = response.getWriter(); //展示不明白为什么要这么写,但是必须要写 String callback = request.getParameter("callback"); //添加json测试数据 JSONObject json = new JSONObject(); try { json.put("ret", "ret"); json.put("msg", "msg"); json.put("zoneid","zoneid"); } catch (JSONException e) { e.printStackTrace(); } response.setContentType("text/html"); response.setCharacterEncoding("utf-8"); //写数据 writer.write(callback + "(" + json + ")"); } public void init() throws ServletException { } }
端口为8013的tomcat做为客服端,其页面调用代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>跨域测试2</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $.ajax({ url : "http://127.0.0.1:8080/kuaYu2/KuaYuTestServlet", dataType : 'jsonp', processData : false, type : 'get', success : function(data) { alert(data.ret); }, error : function(XMLHttpRequest, textStatus,errorThrown) { alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); } }); </script> </head> <body> <input type="text" value=""> </body> </html>
附测试项目,将该项目分别发布到两个服务器上即可。