jquery解决客户端跨域访问问题


Posted in Javascript onJanuary 06, 2015

客户端“跨域访问”一直是一个头疼的问题,好在有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标准支持跨域的数据交换,应该也是一个将来可选的跨域数据交换的解决方案。

Javascript 相关文章推荐
基于jquery的3d效果实现代码
Mar 23 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
AngularJS中的promise用法分析
May 19 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 Javascript
angular.foreach 循环方法使用指南
Jan 06 #Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 #Javascript
json实现前后台的相互传值详解
Jan 05 #Javascript
jQuery中eq()方法用法实例
Jan 05 #Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 #Javascript
jQuery中toggleClass()方法用法实例
Jan 05 #Javascript
jQuery中removeClass()方法用法实例
Jan 05 #Javascript
You might like
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
常见的PHP五种设计模式小结
2011/03/23 PHP
浅谈php自定义错误日志
2015/02/13 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
React组件生命周期详解
2017/07/03 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
学习Vue组件实例
2018/04/28 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
跟老齐学Python之总结参数的传递
2014/10/10 Python
python梯度下降法的简单示例
2018/08/31 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
python 爬虫请求模块requests详解
2020/12/04 Python
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
材料化学专业求职信
2014/07/15 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
Python实现为PDF去除水印的示例代码
2022/04/03 Python
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python