【学亮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--

转载于:https://www.cnblogs.com/niwotaxuexiba/p/9386433.html

【学亮IT手记】Ajax跨域问题精讲--jQuery解决跨域操作相关推荐

jq跨域代理_用jQuery解决跨域访问
浏览器端跨域访问一直是个问题, 多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记得很久以前使用iframe 加script domain 声明,yahoo js ...
【学亮IT手记】oracle集合运算
[学亮IT手记] oracle集合运算 union做并集运算: ①union集合运算的结果不包括去掉重复记录. ②union all集合运算的结果包括重复记录. intersect进行交集运算 min ...
【学亮IT手记】oracle远程连接工具PL/SQL Developer的安装使用教程
[学亮IT手记]oracle远程连接工具PL/SQL Developer的安装使用教程客户端远程连接oracle,可以使用oracle自带的连接工具sqlplus,instanceclient_12 ...
深入跨域问题(2) - 利用 CORS 解决跨域
阅读目录: 深入跨域问题(1) - 初识 CORS 跨域资源共享: 深入跨域问题(2) - 利用 CORS 解决跨域(本篇) 深入跨域问题(3) - 利用 JSONP 解决跨域深入跨域问题(4) - ...
ajax与微服务,微服务 - 如何解决跨域
什么是跨域问题? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对 JavaScript 施加的安全限制. 什么是同源? 所谓同源是指,域名,协议,端口均相同 htt ...
Django 【第十九篇】JS实现的ajax、同源策略和前端JSONP解决跨域问题
一.回顾jQuery实现的ajax 首先说一下ajax的优缺点优点:AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器响应内容不再是整个页面,而是页面 ...
本地html app跨域,本地webapp是怎么解决跨域问题的？
像ionic的cli,都可以把一个ionic的webapp打包成本地的,那这样的话是如何解决跨域问题的? 在PC上,我直接访问连接获取数据,代码如下.(抄自W3School) function loa ...
【跨域】一篇文章彻底解决跨域设置cookie问题！
一篇文章彻底解决跨域设置cookie问题! 大家好我是雪人~~⛄ 之前做项目的时候发现后端传过来的 SetCookie 不能正常在浏览器中使用. 是因为谷歌浏览器新版本Chrome 80将Cookie ...
介绍什么是同源和什么是跨域，以及三种解决跨域问题的路径
什么是同源?什么是跨域? 客户端向服务器发送请求的时候,如果协议,域名(IP)和端口都一样,则称为同源,但凡有一个不一样则跨域,跨域请求默认受到浏览器的安全策略的限制,浏览器会给出相应的错误信息,对于 ...
js webpack 解决跨域问题_webpack-dev-server 作代理解决跨域，让你的本地开发飞起来...
最近在接到一个需求是做一个可视化的监控系统,mock数据来开发的话实在不太方便,况且数据量之大.查了一下资料,可以用webpack-dev-server作为代理,直接请求线上,哈哈哈,是不是很方便. ...

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

【学亮IT手记】Ajax跨域问题精讲--jQuery解决跨域操作相关推荐

最新文章

热门文章