学亮IT手记Ajax跨域问题精讲--jQuery解决跨域操作

Posted 学亮编程手记

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学亮IT手记Ajax跨域问题精讲--jQuery解决跨域操作相关的知识,希望对你有一定的参考价值。

什么是跨域

跨域,它是不同的域名(服务器)之间的相互的资源之间的访问。

当协议,域名,端口号任意一个不同,它们就是不同的域。

正常情况下,因为浏览器安全的问题,不同域之间的资源是不可以访问的。

跨域的解决方案

什么情况下会用到跨域?

一般情况,是在自己的内部的工程中会出现跨域的情况。

有三种解决方案:

1.服务器跨域(代理方案)

2.jsonp,<script>标签的开发策略。

3.XHR2,html5提供,一般是在移动开发中使用。

jQuery解决跨域操作

在jquery中可以使用$.ajax,$.getJSON,$.getScript来解决跨域问题。

前端html/js部分代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例-显示商品信息</title>
<script type="text/javascript"
	src="/jquery_crossDomain/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(function() {
		//将div隐藏
		$("#content").hide();
		$("#a").toggle(function() {
			//向服务器发送请求,得到商品信息,在页面上展示 
			var url = "http://localhost:8080/jquery_ajax/product?callback=?"
			$.getJSON(url,function(data) {
				var jsonObj = eval(data);
				//[{"count":100,"id":1,"name":"电视机","price":2000},{"count":200,"id":2,"name":"洗衣机","price":1000}]
				//处理响应json数据,封装成table的html代码
				var tab = $("<table border=‘1‘><tr><td>编号</td><td>名称</td><td>数量</td><td>价格</td></tr></table>");

				for (var i = 0; i < jsonObj.length; i++) {
					var obj = jsonObj[i];
					var tr = $("<tr><td>"
							+ obj.id
							+ "</td><td>"
							+ obj.name
							+ "</td><td>"
							+ obj.count
							+ "</td><td>"
							+ obj.price
							+ "</td></tr>");
					//内部插入操作
					tab.append(tr);
				}
				//将table在添加到div中
				$("#content").append(tab);

				//显示div
				$("#content").fadeIn(1500);

			});
		}, function() {
			//将商品的信息隐藏
			//将div隐藏
			$("#content").fadeOut(1500);
			//清空div
			$("#content").html("");
		});
	});
</script>
</head>
<body>
	<a href="javascript:void(0)" id="a">显示商品信息</a>
	<hr>
	<div id="content"></div>
</body>
</html>

后台java代码部分:

public class ProductServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String callback=request.getParameter("callback");
		//处理响应数据的中文乱码
		response.setCharacterEncoding("utf-8");
		Product p1 = new Product();
		p1.setId(1);
		p1.setCount(100);
		p1.setName("电视机");
		p1.setPrice(2000);

		Product p2 = new Product();
		p2.setId(2);
		p2.setCount(200);
		p2.setName("洗衣机");
		p2.setPrice(1000);

		List<Product> list = new ArrayList<Product>();
		list.add(p1);
		list.add(p2);
		// 将其转换成json响应到浏览器 fastjson进行java对象到json之间的转换
		String json = JSONObject.toJSONString(list);
		response.getWriter().write(callback+"("+json+")");
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

--end--

以上是关于学亮IT手记Ajax跨域问题精讲--jQuery解决跨域操作的主要内容,如果未能解决你的问题,请参考以下文章

学亮IT手记jQuery each()函数用法实例

学亮IT手记jQuery text()/html()回调函数实例

学亮IT手记jQuery DOM操作-获取内容和属性

学亮IT手记mysql创建/查看/切换数据库

学亮IT手记Servlet的生命周期

跨域 jQuery .AJAX 问题