`
squall140
  • 浏览: 146135 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

JQuery跨域访问解决方案

 
阅读更多

客户端“跨域访问”一直是一个头疼的问题,好在有jQuery帮忙,从jQuery-1.2以后跨域问题便迎刃而解。由于自己在项目中遇到跨域问题,借此机会对跨域问题来刨根问底,查阅了相关资料和自己的实践,算是解决了跨域问题。便记录下来,以供查阅。 
        jQuery.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的。
        真实案例:
        $.ajax({ 
            async:false, 
            url: 'http://www.mysite.com/demo.do',  // 跨域URL
            type: 'GET', 
            dataType: 'jsonp', 
            jsonp: 'jsoncallback', //默认callback
            data: mydata, 
            timeout: 5000, 
            beforeSend: function(){  //jsonp 方式此方法不被触发。原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
            },
            success: function (json) { //客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数 
                if(json.actionErrors.length!=0){ 
                    alert(json.actionErrors); 
                } 
                genDynamicContent(qsData,type,json); 
            }, 
            complete: function(XMLHttpRequest, textStatus){ 
                $.unblockUI({ fadeOut: 10 }); 
            }, 
            error: function(xhr){ 
                //jsonp 方式此方法不被触发
                //请求出错处理 
                alert("请求出错(请检查相关度网络状况.)"); 
            } 
        });

        注意:
        $.getJSON(" http://www.mysite.com/demo.do?name1="+value1+"&callback=?", 
            function(json){ 
                if(json.属性名==值){ 
                    // 执行代码 
                } 
        }); 
    这种方式其实是上例$.ajax({..}) api的一种高级封装,有些$.ajax api底层的参数就被封装而不可见了。

    在服务端通过callback= request.getParameter("callback") 得到jQuery端随后要回调的jsonp32440980
    然后返回类似:"jsonp32440980("+要返回的json数组+")"; 
    jquery就会通过回调方法动态加载调用这个:jsonp32440980(json数组);
    这样就达到了跨域数据交换的目的. 
    jsonp的最基本的原理是:动态添加一个是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) 。JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患。
    注意:jquey是不支持post方式跨域的。
    这是因为虽然采用post +动态生成iframe是可以达到post跨域的目的(有位js牛人就是这样把jquery1.2.5 打patch的),但这样做是一个比较极端的方式,不建议采用。也可以说get方式的跨域是合法的,post方式从安全角度上被认为是不合法的,万不得已还是不要post,client端跨域访问的需求看来也引起w3c的注意了,看资料说html5 WebSocket标准支持跨域的数据交换,应该也是一个将来可选的跨域数据交换的解决方案。

分享到:
评论

相关推荐

    jQuery跨域问题解决方案

    在标题“jQuery跨域问题解决方案”中提到的JSONP(JSON with Padding)便是其中一种。JSONP允许跨域访问,其工作原理是允许用户传递一个回调函数名给服务器,然后服务器将返回一段JavaScript代码,其中包括了调用该...

    jquery下利用jsonp跨域访问实现方法

    在JavaScript的世界里,由于同源策略的限制,浏览器禁止了不同源之间进行AJAX通信,但JSONP(JSON with Padding)作为一种巧妙的方式,允许...虽然有一些限制,但在许多场景下,JSONP仍然是一个实用的跨域解决方案。

    JS跨域访问解决方案总结

    ### JS跨域访问解决方案总结 #### 一、跨域访问概念与同源策略 跨域访问,即一个网站上的资源尝试获取另一个不同域名网站上的资源。这种行为在现代Web开发中非常常见,例如通过`<style>`标签加载外部样式表、`...

    js+jsp+json+tomcat跨域访问

    在IT行业中,跨域访问是Web开发中一个重要的概念,特别是在使用JavaScript、JSP、JSON以及前端库如jQuery时。本教程将详细讲解如何利用这些技术实现跨域数据交互。 首先,我们需要理解“跨域”这个术语。在浏览器的...

    jQuery 跨域访问问题解决方法

    在标题和描述中提到的jQuery跨域访问,主要依赖于JSONP技术。 在上述代码示例中,可以看到一个`$.ajax()`的例子,设置了`dataType`为`'jsonp'`,这是告诉jQuery我们要使用JSONP方式来处理跨域请求。`jsonp`参数用于...

    jquery 跨域访问问题解决方法(笔记)

    这篇文章主要讲述了解决jQuery跨域访问问题的方法,并且通过一个具体的案例来说明了问题的解决过程。 首先,让我们明确什么是跨域访问问题。跨域访问指的是当一个网页试图从不同域名的服务器请求资源时,由于浏览器...

    jQuery跨域问题

    在JavaScript的世界里,由于同源策略的限制,浏览器禁止了不同源之间的Ajax请求,这给开发者带来了很大的困扰。然而,jQuery作为一个强大...在实际开发中,根据项目需求和服务器支持选择合适的解决方案,是非常重要的。

    JQuery Ajax 跨域访问的解决方案

    综上所述,JQuery Ajax跨域访问的解决方案,尤其是使用动态脚本方法,为开发者提供了一种便捷的跨域数据访问手段。但开发者应权衡不同方法的优缺点,以及在具体项目中的适用性,来选择最合适的实现方式。

    jquery下利用jsonp跨域访问实现方法.docx

    JSONP(JSON with Padding)...总之,JSONP是jQuery中实现跨域访问的一种常见方法,尤其在不支持CORS的旧浏览器环境中非常有用。但随着技术的发展,CORS已成为更推荐的跨域解决方案,因为它提供了更多的控制和安全性。

    jquery跨域调用webservice

    JSONP 是一种解决跨域请求的有效手段,它通过动态创建`<script>`标签来请求跨域的数据,并通过回调函数处理返回的数据。JSONP 的关键在于服务器返回的数据会被包裹在一个客户端提供的回调函数中,从而绕过浏览器的...

    Jquery跨域请求的实现

    CORS是一种更现代且安全的跨域解决方案,它通过设置HTTP头信息来允许浏览器与服务器之间进行跨域通信。在服务器端,我们需要设置`Access-Control-Allow-Origin`头部,允许特定或所有源的请求。在jQuery的AJAX请求中...

    跨域访问解决方法-jsonp

    跨域访问是Web开发中一个常见的挑战,尤其是在进行Ajax异步请求时,浏览器的同源策略(Same-origin policy)会限制JavaScript从一个源获取另一个源的数据。为了解决这个问题,开发者通常采用JSONP(JSON with ...

    用YQL和Jquery实现的跨域html页面截取

    标题提到的"用YQL和Jquery实现的跨域html页面截取"是一个解决方案,它利用了Yahoo Query Language(YQL)和jQuery库来解决这个问题。下面我们将详细探讨这些知识点。 首先,让我们了解什么是跨域。在Web开发中,...

    jquery跨域调用wcf

    2. **CORS**:CORS是现代浏览器支持的一种标准跨域解决方案。服务端需要在响应头中添加`Access-Control-Allow-Origin`字段,指定允许哪些源进行跨域请求。JQuery的$.ajax()函数可以通过设置xhrFields参数启用CORS。 ...

    请求跨域的解决方案.docx

    请求跨域的解决方案主要涉及到Web开发中的安全性原则和跨域资源共享(CORS)机制。当一个Web应用尝试从一个不同的源(域名、协议或端口)请求资源时,浏览器会根据同源策略(Same-Origin Policy)限制这种行为,以...

    jQuery跨域请求,获取返回值

    但为了实现某些功能,如Ajax数据交互,开发者需要找到合法的跨域解决方案。 jQuery中的`$.ajax()`方法是进行跨域请求的主要工具。要开启跨域,需要设置`xhrFields`选项中的`withCredentials`属性为`true`,并设置`...

    Ajax跨域访问(ASP.NET Web)

    本教程将重点讲解如何在ASP.NET Web环境中处理Ajax跨域访问。 一、理解同源策略 同源策略是浏览器为了保护用户安全而实施的一项安全机制,它禁止了一个源(domain)的文档或脚本获取或操作另一个源的资源。这意味着...

Global site tag (gtag.js) - Google Analytics