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 相关文章推荐
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
ReactNative之FlatList的具体使用方法
Nov 29 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 Javascript
vue2实现provide inject传递响应式
May 21 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在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
js传值 判断
2006/10/26 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python实现ftp客户端示例分享
2014/02/17 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
Python中title()方法的使用简介
2015/05/20 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
adidas美国官网:adidas US
2016/09/21 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
介绍Java的内部类
2012/10/27 面试题
学生个人求职自荐信格式
2013/09/23 职场文书
缴纳养老保险的证明
2014/01/10 职场文书
八年级历史教学反思
2014/01/10 职场文书
《钱学森》听课反思
2014/03/01 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
庆七一主持词
2015/06/29 职场文书
企业法律事务工作总结
2015/08/11 职场文书