什么是跨域

跨域，它是不同的域名（服务器）之间的相互的资源之间的访问。

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

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

跨域的解决方案

什么情况下会用到跨域？

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

有三种解决方案：

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解决跨域操作的更多相关文章

  1. 【学亮IT手记】jQuery each()函数用法实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  2. [ionic开源项目教程] - 第14讲 ionic解决跨域问题

    [ionic开源项目教程] 第14讲 使用jsonp解决跨域问题 相信很多朋友在开发中都会遇到以下这个问题. No 'Access-Control-Allow-Origin' header is pr ...

  3. 【学亮编程手记】Spring Cloud三大组件Eureka/Feign/Histrix的原理及使用

  4. 【学亮IT手记】MySql行列转换案例

    create table score( name ), math int, english int ); ,); ,); ,); ,); SHOW tables; SELECT * from scor ...

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

    --创建数据库 create database web_test1 CHARACTER set utf8; --切换数据库 use web_test1; --查看当前使用的数据库 select DAT ...

  6. 【学亮IT手记】Servlet的生命周期

    1.1 Servlet的生命周期 1.1.1 Servlet的生命周期概述 1.1.1.1 什么是生命周期 生命周期:一个对象从创建到销毁过程. 1.1.1.2 Servlet的生命周期(*****) ...

  7. 【学亮IT手记】利用字节流复制图片

  8. 【学亮IT手记】利用字节流复制文件

  9. 【学亮IT手记】使用Map代替switch...case语句

随机推荐

  1. Spring 的application.properties项目配置与注解

    一.项目结构介绍 如上图所示,Spring Boot的基础结构共三个文件: src/main/java  程序开发以及主程序入口 src/main/resources 配置文件 src/test/ja ...

  2. [BZOJ 2759] 一个动态树好题

    [BZOJ 2759] 一个动态树好题 题目描述 首先这是个基环树. 然后根节点一定会连出去一条非树边.通过一个环就可以解除根的答案,然后其他节点的答案就可以由根解出来. 因为要修改\(p_i\),所 ...

  3. Ubuntu16.04 下 hadoop的安装与配置（伪分布式环境）

    一.准备 1.1创建hadoop用户 $ sudo useradd -m hadoop -s /bin/bash #创建hadoop用户,并使用/bin/bash作为shell $ sudo pass ...

  4. SQL Server 数据导入Mysql具体教程

    SQLServer2005数据导入Mysql到具体教程(測试) SQL SERVER数据导入MYSQL文件夹   1.Navicat for MySQL 版本号10.0.9 2.创建目标数据库 3.创 ...

  5. [matlab] 21.灰色预测、线性回归分析模型与最小二乘回归 (转载)

    灰色预测的主要特点是只需要4个数据,就能解决历史数据少,序列的完整性以及可靠性低的问题,能将无规律的原始数据进行生成得到规律性较强的生成序列,易于检验 但缺点是只适合中短期的预测,且只适合指数级增长的 ...

  6. 转://Oracle undo 自动调优

    Oracle 10gr2的后续版本中添加了UNDO信息最短保留时间段自动调优的特性,不再仅仅依据参数UNDO_RETENTION的设定,其调优原则如下:1. 当UNDO TABLESPACE为 fix ...

  7. P1843 奶牛晒衣服（二分）

    思路:就是一个模板,只是找最小化而已.在判断函数里面:当湿度<=x*A不判断, 反之sum+=(a[i]-x*A)/B+(a[i]-x*A)%B?1:0; #include<iostrea ...

  8. pytorch torch.Storage学习

    tensor分为头信息区(Tensor)和存储区(Storage) 信息区主要保存着tensor的形状(size).步长(stride).数据类型(type)等信息,而真正的数据则保存成连续数组,存储 ...

  9. P1440 求m区间内的最小值--洛谷luogu

    题目描述 一个含有n项的数列(n<=2000000),求出每一项前的m个数到它这个区间内的最小值.若前面的数不足m项则从第1个数开始,若前面没有数则输出0. 输入输出格式 输入格式: 第一行两个 ...

  10. 从.Net框架Bug的提交到修复代码成功合并到.NET CoreFX主线

    从发现.NET Framework中SmtpClient的Bug并拿出解决方案,然后给微软开发者社区提交Bug开始,总共耗时一个多月,对Bug修复的代码最终被采纳,现已合并到.NET Core Lib ...