`
lym6520
  • 浏览: 695406 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

jquery:利用jsonp跨域访问

    博客分类:
  • JS
阅读更多
        客户端的跨域访问,可以通过jsonp方式来实现,jquery提供了跨域访问的方法,
        jQuery.ajax()支持get方式的跨域。当然支持跨域还需要服务器端相应的处理。

      

 $.ajax({ 
            async:false, 
            url: '',  // 跨域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); 
                } 
                
            }, 
            complete: function(XMLHttpRequest, textStatus){ 
               
            }, 
            error: function(xhr){ 
                //jsonp 方式此方法不被触发
                //请求出错处理 
                alert("请求出错(请检查相关度网络状况.)"); 
            } 
        });


        注意:
      
 $.getJSON(url+"?callback=?", 
            function(json){ 
               
        }); 

    这种方式其实是上例$.ajax({..}) 的一种高级封装。
引用

    在服务端通过获得callback参数(如:jsonp*****)得到jQuery端随后要回调的
    然后返回类似:"jsonp*****("+要返回的json数组+")";
    jquery就会通过回调方法动态加载调用这个:jsonp*****(json数组);
    这样就达到了跨域数据交换的目的.


    JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患。

    注意:jquey是不支持post方式跨域的。
   
    参考:http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/
分享到:
评论

相关推荐

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

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

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

    本文将给您介绍如何使用getJSON来实现异步跨域提交表单

    AJax与Jsonp跨域访问问题小结

    本文给大家汇总介绍了JavaScript的AJax,JQuery的AJax以及利用jsonp实现跨域访问的问题,非常的细致全面,有需要的小伙伴可以参考下。

    轻松搞定jQuery+JSONP跨域请求的解决方案

    JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的...

    利用jsonp解决js读取本地json跨域的问题

    主要给大家介绍了关于利用jsonp解决js读取本地json跨域的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    Ajax结合Jsonp实例

    使用Jquery中的Aajx方法利用Jsonp方式访问豆瓣公开的api接口,跨域获取书籍信息。

    解决jQuery使用JSONP时产生的错误

    什么是域,简单来说就是协议+域名或地址+端口,3者只要有任何一个不同就表示不在同一个域。跨域,就是在一个域中访问另一个...顾名思义,JSONP是利用JSON作为垫片,从而实现跨域请求的一种技术手段。其基本原理是利用HT

    jquery的ajax和getJson跨域获取json数据的实现方法

    很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了。近日在进行开 发时,因为要和第三方公司的一个项目进行数据的共享,因为考虑多不占用服务器...

    JS跨域交互(jQuery+php)之jsonp使用心得

    JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的...

    浅析JSONP之解决ajax跨域问题

    本文主要讲解了如何去解决AJAX跨域的问题,从跨域的简单原理到JONP实现模式详细的讲解整个解决方案,最后利用jQuery可以很方便的实现JSONP来进行跨域访问。

    JavaScript权威指南(第六版) 清晰-完整

    20.3 利用IE userData持久化数据 20.4 应用程序存储和离线Web应用 第21章 多媒体和图形编程 21.1 脚本化图片 21.2 脚本化音频和视频 21.3 SVG:可伸缩的矢量图形 21.4 中的图形 第22章 HTML5 API 22.1 地理位置 22.2...

    JavaScript权威指南(第6版)(中文版)

    20.3 利用IE userData持久化数据 20.4 应用程序存储和离线Web应用 第21章 多媒体和图形编程 21.1 脚本化图片 21.2 脚本化音频和视频 21.3 SVG:可伸缩的矢量图形 21.4 中的图形 第22章 HTML5 API 22.1 地理位置 22.2...

    JavaScript权威指南(第6版)

    20.3 利用IE userData持久化数据 20.4 应用程序存储和离线Web应用 第21章 多媒体和图形编程 21.1 脚本化图片 21.2 脚本化音频和视频 21.3 SVG:可伸缩的矢量图形 21.4 中的图形 第22章 HTML5 API 22.1 地理位置 22.2...

    JavaScript权威指南(第6版) 中文版

    20.3 利用ie userdata持久化数据 592 20.4 应用程序存储和离线web应用 594 第21章 多媒体和图形编程 606 21.1 脚本化图片 606 21.2 脚本化音频和视频 608 21.3 svg:可伸缩的矢量图形 615 21.4 [canvas]中的图形 623...

    JavaScript权威指南(第6版)

    20.3 利用ie userdata持久化数据 592 20.4 应用程序存储和离线web应用 594 第21章 多媒体和图形编程 606 21.1 脚本化图片 606 21.2 脚本化音频和视频 608 21.3 svg:可伸缩的矢量图形 615 21.4 [canvas]中的图形 623...

    JavaScript权威指南(第6版)中文文字版

    20.3 利用ie userdata持久化数据 592 20.4 应用程序存储和离线web应用 594 第21章 多媒体和图形编程 606 21.1 脚本化图片 606 21.2 脚本化音频和视频 608 21.3 svg:可伸缩的矢量图形 615 21.4 [canvas]中的图形 623...

Global site tag (gtag.js) - Google Analytics