解决ajax跨域请求问题

最新推荐文章于 2023-03-05 12:43:56 发布

iteye_13098

最新推荐文章于 2023-03-05 12:43:56 发布

阅读量154

点赞数

分类专栏：前端文章标签：跨域

本文链接：https://blog.csdn.net/iteye_13098/article/details/82635433

版权

前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

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

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