1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 【学亮IT手记】Ajax跨域问题精讲--jQuery解决跨域操作

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

时间:2023-06-25 13:48:42

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。