`

解决ajax跨域请求问题

跨域 
阅读更多

参考地址：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>

 

   附测试项目，将该项目分别发布到两个服务器上即可。

分享到：
| web.xml 一些实用的配置
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics