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的跨域调用文件
Nov 19 Javascript
javascript 学习笔记(一)DOM基本操作
Apr 08 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
js实现目录定位正文示例
Nov 14 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 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延迟静态绑定示例分享
2014/06/22 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
JavaScript函数节流的两种写法
2017/04/07 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
python返回昨天日期的方法
2015/05/13 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
python实现周期方波信号频谱图
2018/07/21 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
耐克亚太地区:Nike APAC
2019/12/07 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
2016年公司新年寄语
2015/08/17 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
java设计模式--建造者模式详解
2021/07/21 Java/Android
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python
SQL语句多表联合查询的方法示例
2022/04/18 MySQL
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android