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 相关文章推荐
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
原生js实现日期联动
Jan 12 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
原生js二级联动效果
Jun 20 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 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
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
python比较2个xml内容的方法
2015/05/11 Python
python 异或加密字符串的实例
2018/10/14 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
python异常处理try except过程解析
2020/02/03 Python
HEMA英国:荷兰原创设计
2018/08/28 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
求网格中的黑点分布
2013/11/06 面试题
linux面试题参考答案(4)
2013/01/28 面试题
我未来的职业规划范文
2014/01/11 职场文书
大学生实习感言
2014/01/16 职场文书
个人先进材料范文
2014/12/30 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技