分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

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

发布时间:2023-09-06 02:06责任编辑:蔡小小关键词:jQueryAjax跨域

什么是跨域

跨域,它是不同的域名(服务器)之间的相互的资源之间的访问。

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

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

跨域的解决方案

什么情况下会用到跨域?

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

有三种解决方案:

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解决跨域操作

原文地址:https://www.cnblogs.com/niwotaxuexiba/p/9386433.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved