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 Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
微信小程序滑动选择器的实现代码
Aug 10 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 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
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
在Javascript中 声明时用"var"与不用"var"的区别
2013/04/15 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
python操作ie登陆土豆网的方法
2015/05/09 Python
python 调用c语言函数的方法
2017/09/29 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
Python字符串的常见操作实例小结
2019/04/08 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
简单了解python中的与或非运算
2019/09/18 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
wxpython绘制音频效果
2019/11/18 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
致400米运动员广播稿
2014/02/07 职场文书
犯错检讨书
2014/02/21 职场文书
授权委托书怎么写
2014/09/25 职场文书
车辆管理制度范本
2015/08/05 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
话题作文之自信作文
2019/11/15 职场文书
python中如何对多变量连续赋值
2021/06/03 Python