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 相关文章推荐
JScript的条件编译
May 29 Javascript
js 实现复制到粘贴板的功能代码
May 13 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
纯js实现手风琴效果
Apr 17 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
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
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
详解PHP归并排序的实现
2016/10/18 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
Javascript 汉字字节判断
2009/08/01 Javascript
JavaScript 面向对象之命名空间
2010/05/04 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
[00:35]可解锁地面特效
2018/12/20 DOTA
Djang中静态文件配置方法
2015/07/30 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
自主招生自荐书
2013/11/29 职场文书
公务员转正考察材料
2014/02/07 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
行政申诉状范文
2015/05/20 职场文书
三国演义读书笔记
2015/06/25 职场文书
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB