zoukankan      html  css  js  c++  java
  • 【学亮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--

  • 相关阅读:
    有几个控件的操作时有关联关系,一个对话框中有多组这样的控件群,各个组中的控件的消息响应处理非常类似,以下提供解决方案
    Visual Studio DSL 入门 1 什么是特定领域开发和DSL
    ★软件架构DSL领域特定语言初探[
    人生如棋胜似棋
    成功女性处世十大秘诀
    职场丽人应具备十二种经典姿态
    程序员真实写真:35岁前成功的12条黄金法则 (转)
    思雨如思君(七言)
    站在2006的边缘
    不得不学的创业“八忌”
  • 原文地址:https://www.cnblogs.com/niwotaxuexiba/p/9386433.html
Copyright © 2011-2022 走看看