【学亮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()函数用法实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- [ionic开源项目教程] - 第14讲 ionic解决跨域问题
[ionic开源项目教程] 第14讲 使用jsonp解决跨域问题 相信很多朋友在开发中都会遇到以下这个问题. No 'Access-Control-Allow-Origin' header is pr ...
- 【学亮编程手记】Spring Cloud三大组件Eureka/Feign/Histrix的原理及使用
- 【学亮IT手记】MySql行列转换案例
create table score( name ), math int, english int ); ,); ,); ,); ,); SHOW tables; SELECT * from scor ...
- 【学亮IT手记】mysql创建/查看/切换数据库
--创建数据库 create database web_test1 CHARACTER set utf8; --切换数据库 use web_test1; --查看当前使用的数据库 select DAT ...
- 【学亮IT手记】Servlet的生命周期
1.1 Servlet的生命周期 1.1.1 Servlet的生命周期概述 1.1.1.1 什么是生命周期 生命周期:一个对象从创建到销毁过程. 1.1.1.2 Servlet的生命周期(*****) ...
- 【学亮IT手记】利用字节流复制图片
- 【学亮IT手记】利用字节流复制文件
- 【学亮IT手记】使用Map代替switch...case语句
随机推荐
- vue-router 管理视图详解
什么是路由 在web开发中,路由是指根据url分配到对应的处理程序,当访问不同的url就会切换到对应的处理程序 在vue中一个url对应的就是一个组件,当访问不同的url,对应的组件就会呈现到页面中 ...
- svn解决冲突问题
1.在linux的branchs下创建了一个新的分支branch_2后,commit.提示: 2.这是把/my_branch/index.html删除后svn update也不能解决问题 3.到myb ...
- RPC通信原理(未完，先睡觉)
一 背景 OpenStack 各组件之间是通过 REST 接口进行相互通信,比如Nova.Cinder.Neutron.Glance直间的通信都是通过keystone获取目标的endpoint,即ap ...
- Luogu P4323 [JSOI2016]独特的树叶
一道比较好的树Hash的题目,提供一种不一样的Hash方法. 首先无根树的同构判断一般的做法只有树Hash,所以不会的同学可以做了Luogu P5043 [模板]树同构([BJOI2015]树的同构) ...
- 波音，自动驾驶bug未修复，致346人丧生！5个月内两次坠毁！其中，包括8名中国公民
一,波音737 MAX再次坠毁 继2018年10月29日,印尼波音737MAX飞机坠入爪哇海,导致178名乘客不幸遇难后,时隔不足5月,上周日,埃塞俄比亚航空公司一架波音737MAX客机在飞往肯尼亚途 ...
- git仓库迁移
最近,装了git的本地服务器坏掉了, 没办法只能临时进行仓库的迁移 保证项目正常进行 在项目的根目录执行右键执行 查询当前仓库的远程地址 git remote -v 查看现有远程仓库的地址url 修 ...
- Java 控制语句：循环、条件判断
基础很重要,基础很重要,基础很重要.重要的事情说三遍,. 程序设计中的控制语句主要有三种:顺序.分支和循环.我们每天写的代码,除了业务相关,里面会包含大量的控制语句.但是控制语句的基本使用,是否有些坑 ...
- java.util.Stack类中 empty() 和 isEmpty() 方法的作用
最近在学习算法和数据结构,用到Java里的Stack类,但程序运行结果一直和我预料的不一样,网上也没查清楚,最后查了API,才搞明白. java.util.Stack继承类 java.util.Vec ...
- oracle 11g空表不能exp导出问题解决方案
oracle 11g空表不能exp导出问题解决方案 最近由于要进行迁移服务器代码和数据库,突然发现导出的表少了,通过排查发现空表尽然没有exp导出,真是郁闷啊,虽然是空表没数据,但也不能没有啊,如何是 ...
- CentOS 7+nginx+PHP+php-fpm
根据网上资料配置: location ~ \.php$ { #include fastcgi_params; fastcgi_pass 127.0.0.1:9000; fastcgi_index in ...