什么是跨域
跨域,它是不同的域名(服务器)之间的相互的资源之间的访问。
当协议,域名,端口号任意一个不同,它们就是不同的域。
正常情况下,因为浏览器安全的问题,不同域之间的资源是不可以访问的。
跨域的解决方案
什么情况下会用到跨域?
一般情况,是在自己的内部的工程中会出现跨域的情况。
有三种解决方案:
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--