`

关于ajax跨域的解决方案

阅读更多

 


出于安全的考虑,如果你要从www.a.com通过Ajax来请求另外一个网站www.b.com的内容,浏览器是不允许你这样做的(不理解这里的安全是指什么?想想如果没有这个限制的话,黑客可以做些什么)。那什么样的情况下算是跨域?域名不同那当然算是跨域了,例如a.com向b.com发送请求,这当然就是跨域了,不允许的。不过子域名不同(例如sub.a.com向www.a.com发送请求)甚至是同域名不同端口(例如 a.com:80向a.com:8080)也算是跨域的。

 

下面演示一个跨域的例子:

 

<script type="text/javascript" >
    //jQuery代码
    $("#btnCrossDomainRequest").click(function(){ 
        $.get('http://dudu.cnblogs.com', function(data){ 
            alert('success'); 
        }); 
    }); 
  </script>

 

 


 

 

(在IE8下提示没有权限,在FF3.5.5和Google浏览器下都没有提示,汗~我记得FF以前的版本是有提示的。。IE6下应该会弹窗提示 (没记错

<script src="http://rainmangogo.appspot.com/tinymce/themes/advanced/langs/zh.js" type="text/javascript"></script>

 

<script src="http://rainmangogo.appspot.com/tinymce/plugins/wordpress/langs/zh.js" type="text/javascript"></script>

的话))

 

<!-- more-->

 

跨域AJAX请求的解决方案

在AJAX应用环境中,由于安全的原因,浏览器不允许XMLHttpRequest组件请求跨域资源。在很多情况下,这个限制给我来带来的诸多不便。很多同行,研究了各种各样的解决方案:

1. 通过修改document.domain和隐藏的IFrame来实现跨域请求。这种方案可能是最简单的一种跨域请求的方案,但是它同样是一种限制最大的方案。首先,它只能实现在同一个顶级域名下的跨域请求;另外,当在一个页面中还包含有其它的IFrame时,可能还会产生安全性异常,拒绝访问。

2.通过请求当前域的代理,由服务器代理去访问另一个域的资源。XMLHttpRequest通过请求本域内的一个服务器资源,将要访问的目标资源提供给服务器,交由服务器去代理访问目标资源。这种方案,可以实现完全的跨域访问,但是开发,请求过程的消费会比较大。

3. 通过HTML中可以请求跨域资源的标签引用来达到目的,比如Image,Script,LINK这些标签。在这些标签中,Script无疑是最合适的。在请求每一个脚本资源时,浏览器都会去解析并运行脚本文件内定义的函数,或需要马上执行的JavaScript代码,我们可以通过服务器返回一段脚本或 JSON对象,在浏览器解析执行,从而达到跨域请求的目的。使用script标签来实现跨域请求,只能使用get方法请求服务器资源。

以上内容摘自:利用 script标签实现的跨域名AJAX请求(ExtJS)

 

第一个解决方案需要根域名是相同的,例如a.domain.comb.domain.com。整个解决方案大概如下图所示:

 

第二个解决方案就是在服务器端通过WebClient(或者其他)的类来请求跨域的内容,这里需要注意的一点是,如果你要将cookies信息也包含在WebClient的请求中的话,你需要手动的去将Cookies信息加到WebClient中去。

第三个解决方案就和我们下面需要说道的JSONP有关的。

JSONP

JSONP全称应该是“JSON with padding”吧,它正是利用了<script />可以跨域请求的特性。简单来说JSONP就是在客户端将要用来处理请求结果的函数名作为参数传递给服务器端,然服务器端将请求结果数据作为参数包装在这个函数中并返回给客户端执行。有点抽象?那么直接看图吧:

下面来个实例讲解一下。这个实例就是为我们的博文自动生成一个短址的url,为了墙内的朋友方便,我们就直接使用国内的http://s8.hk提供的短址服务(API地址)。

我们试下

 

<script type="text/javascript">
    $("#shortIt").click(function(){ 
        c_url = 'http://s8.hk:8088/s8/s?format=text&longUrl='; 
        c_url +=document.location.href; 
        $.get(c_url,function(data){ 
            alert(data); 
        }) 
    }); 
</script>


 

测试下,什么?不可以?肯定不可以啦,因为是跨域嘛,所以我们需要利用<script />标签可以跨域请求的特性:

 

<script type="text/javascript">
    functionalertShortUrl(url){ 
        alert(url); 
    }
 
    $(
"#shortItByJSONP").click(function(){ 
        c_url = 'http://s8.hk:8088/s8/s?format=text&longUrl='; 
        c_url +=document.location.href; 
        //注意下面将函数名‘alertShortUrl’传进去咯
        c_url += '&jsonp=alertShortUrl'
        //生成一个<script />标签并添加到<head />中
        script =$('<script type="text/javascript" />') 
            .attr('src', c_url); 
        //这里为什么要用appendChild?
        //因为jQuery的append方法对<script/>已经做了处理
        //你也可以用$('head').append(script);
        //这里不用只是为了让你看得更清楚点而已。
        $('head')[0].appendChild(script[0]); 
    }); 
</script> 


 

哈哈,再点点测试按钮看看?很好,成功了。

其实不用这么麻烦,因为jQuery自从1.2版以后就已经添加了对JSONP的支持,你只需要给一个问号作为占位符就可以了,所以我们上面的代码可以写成:

 

<script type="text/javascript">
    $("#shortItByjQueryJSONP").click(function(){ 
        c_url = 'http://s8.hk:8088/s8/s?format=text&longUrl='; 
        c_url +=document.location.href; 
        //注意下面只需一个问号,不用具体的函数名
        c_url += '&jsonp=?'
        //注意是getJSON 哦
        $.getJSON(c_url, function(data){ 
            alert(data); 
        }); 
    }); 
</script>


 

 

哈哈,是不是很简便呢?下面就用这个实现为我们的文章添加自动缩短网址的功能吧:

 

<script type="text/javascript">
    $(function(){ 
        c_url = 'http://s8.hk:8088/s8/s?format=text&longUrl='; 
        c_url +=document.location.href; 
        //注意下面只需一个问号,不用具体的函数名
        c_url += '&jsonp=?'
        $.getJSON(c_url, function(data){ 
            //这里要这么处理、放到哪里就看你自己喜欢咯.而且这还和你博客使用的模板有关的哦
            $("<div>本文短址:</div>").css("font-weight", "normal") 
                .css("font-size", "12px") 
                .append($("<a>"+data+"</a>").attr("href", data)) 
                .appendTo(".post .postTitle"); 
        });

    }); 
</script> 


分享到:
评论

相关推荐

    Ajax跨域访问解决方案

    JSONP是一种早期的跨域解决方案,它是通过动态创建`&lt;script&gt;`标签来加载数据的。因为`&lt;script&gt;`标签不受同源策略限制,可以通过`src`属性指向提供JSON数据的外部服务。服务端返回的数据是一个JavaScript函数调用,...

    Javascript跨域和Ajax跨域解决方案

    本文将深入探讨JavaScript和Ajax跨域的原理,以及常用的解决方案。 首先,理解同源策略是解决跨域问题的基础。同源策略是浏览器为了保障用户安全而设定的一种机制,它规定了只有同源(即协议、域名和端口都相同)的...

    js跨域解决方案

    1. **JSONP(JSON with Padding)**:JSONP是一种早期的跨域解决方案,它依赖于`&lt;script&gt;`标签不受同源策略限制的特点。通过动态创建`&lt;script&gt;`标签,设置其`src`属性为提供服务的服务器接口,并由服务器返回一个包裹...

    关于ajax跨域问题的几种常见解决方案,附代码。

    什么是跨域,跨域出现的场景,模拟跨域,springmvc下解决跨域,springboot下解决跨域。绝对原创。

    ajax跨域解决办法

    【AJAX跨域解决办法】 在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下更新部分网页的技术。然而,由于浏览器的同源策略限制,AJAX请求通常只能发送到与当前页面同一源的...

    Ajax跨域问题及其解决方案.docx

    这是目前最常用的跨域解决方案之一,主要通过在服务端添加CORS(Cross-Origin Resource Sharing)配置来实现。 - **服务端配置示例**(Java): ```java @Configuration public class CorsConfig implements ...

    Ajax跨域问题 解决方案

    ### Ajax跨域问题解决方案 #### 一、什么是Ajax跨域 **原理:** Ajax跨域问题的核心在于浏览器的“同源策略”。同源策略是一种安全措施,用于限制一个域名下的文档或脚本如何与另一个来源的资源进行交互。简单来说...

    Ajax跨域问题及解决方案(jsonp,cors)

    解决方案: 1.jsonp  在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用和进一步处理;在前台通过动态添加script标签及src属性,表面看上去与ajax极为相似,但是,这和ajax并没有任何关系;...

    JQuery跨域访问解决方案

    JQuery的跨域解决方案主要依赖于JSONP(JSON with Padding)技术。JSONP是一种绕过同源策略的方式,它利用HTML中的`&lt;script&gt;`标签没有同源策略限制的特点。当jQuery使用`dataType: 'jsonp'`时,它实际上是在做以下几...

    解决ajax跨域问题

    在实际项目中,开发者需要根据具体情况选择合适的跨域解决方案。例如,JSONP适用于简单的GET请求,而CORS则更通用,支持各种HTTP方法。同时,注意跨域安全问题,避免因不当配置导致的安全风险。

    Ajax跨域详解与代码

    - `详解地址.txt`:详细的Ajax跨域解决方案的文本说明。 - `ajaxclient1`:一个简单的Ajax客户端示例,可能使用JavaScript或jQuery实现,用于发起跨域请求。 - `ajaxserver1`:一个服务端示例,可能是Java应用,展示...

    Ajax跨域请求解决方案-JSONP

    总的来说,JSONP是Ajax跨域请求的一种实用解决方案,尤其适用于只支持GET请求且不涉及复杂交互的场景。但是,它也有一些局限性,比如不支持POST请求、无法控制HTTP头部、无错误处理机制等。因此,在现代Web开发中,...

    Ajax跨域提交

    每种方法都有其适用场景和优缺点,开发者需要根据实际需求选择合适的跨域解决方案。在进行Ajax跨域提交时,需要注意处理可能出现的安全问题,比如XSS(Cross-Site Scripting)和CSRF(Cross-Site Request Forgery)攻击...

    ajax跨域问题的解决办法

    解决ajax跨域问题有多种方法,以下是几种常见的解决方案: 1. 使用中间层过渡的方式 这种方法是通过在ajax请求和不同域的服务器之间加一层中间层来解决跨域问题。中间层可以是php、jsp、c++等任何具备网络通讯功能...

    IE7 Ajax跨域问题

    1. **JSONP (JSON with Padding)**:这是一种常见的跨域解决方案,它通过动态创建`&lt;script&gt;`标签来加载来自其他域的JavaScript代码,因为脚本标签不受同源策略限制。服务器返回的JSON数据被包装在一个函数调用中,...

    ajax跨域讲解

    在收集AJAX面试题的时候其实就已经有过AJAX跨域的问题的了,当时候知道了为什么会存在跨域,以及跨域解决的方案有哪些,今天随着课程的学习,又加深了AJAX跨域的理解,以此记录下来。

    PHP Ajax跨域问题解决方案代码实例

    本文通过设置Access-Control-Allow-Origin来实现跨域。 例如:客户端的域名是client.runoob.com,而请求的域名是server.runoob.com。 如果直接使用ajax访问,会有以下错误: XMLHttpRequest cannot load ...

Global site tag (gtag.js) - Google Analytics