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实现菜单式图片滑动切换
Mar 14 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
javascript self对象使用详解
Oct 18 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
js实现上传图片并显示图片名称
Dec 18 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
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循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
prototype 中文参数乱码解决方案
2009/11/09 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python中enumerate函数遍历元素用法分析
2016/03/11 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
Linux下多个Python版本安装教程
2018/08/15 Python
Python实现八皇后问题示例代码
2018/12/09 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
python基础 range的用法解析
2019/08/23 Python
python生成随机红包的实例写法
2019/09/02 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
校园运动会广播稿
2014/10/06 职场文书
小王子读书笔记
2015/06/29 职场文书
关于运动会的广播稿
2015/08/19 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang