使用js解决跨域访问的问题

本文探讨了浏览器的同源策略及其导致的跨域访问限制。通过介绍JSON和JSONP,揭示了JSONP作为跨域解决方案的工作原理。通过示例代码展示了如何在前端和后端实现JSONP请求,以及如何定义自定义回调函数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

为什么会出这样的错误呢?这是因为所有支持Javascript的浏览器都会使用同源策略这个安全策略。看看百度的解释:

  同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。

  这就是引起为何取不到数据的原因了,那如何才能解决跨域的问题呢?没错,我们现在可以进入正题,来了解下什么是JSONP了。

JSON和JSONP

  JSONP和JSON好像啊,他们之间有什么联系吗?

  JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧,不是很清楚的朋友可以去json.org上了解下,简单易懂。

  JSONP是JSON with Padding的略称。它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。--来源百度

  JSONP就像是JSON+Padding一样(Padding这里我们理解为填充), 我们先看下面的小例子然后再详细介绍。

前途调用代码:

function submitForm (){

$.getJson("http://localhost:7001/WebRoot/checkcode?callback=?",function(data){
alert(data.name + " is a a" + data.sex);
})

}

后台代码:后台java类需要继承HttpServlet

public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//获取回调函数名
            String callback = request.getParameter("callback");
            //json数据
            String json = "{\"name\":\"chopper\",\"sex\":\"man\"}";
            response.setContentType("application/json");
            response.getWriter().print(callback + "("+json+")");
}

如果需要自定返回处理函数: 使用$.ajax

 $.ajax({
       url:"http://localhost:7001/WebRoot/checkcode?callback=?",   
       dataType:"jsonp",
       jsonpCallback:"person",
       success:function(data){
           //alert("0000");
       }
  });

 //回调函数person
    function person(data) {
        alert(data);
    }

详见:http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值