学亮IT手记Ajax跨域问题精讲--jQuery解决跨域操作
Posted 学亮编程手记
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学亮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解决跨域操作的主要内容，如果未能解决你的问题，请参考以下文章