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 相关文章推荐
php跨域调用json的例子
Nov 13 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
vue实现菜单切换功能
May 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
yii2.0实现创建简单widgets示例
2016/07/18 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
python回调函数的使用方法
2014/01/23 Python
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
python判断无向图环是否存在的示例
2019/11/22 Python
python绘制玫瑰的实现代码
2020/03/02 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
英语专业应届生求职信范文
2013/11/15 职场文书
信息系统专业个人求职信范文
2013/12/07 职场文书
大学毕业感言一句话
2014/02/06 职场文书
企业出纳岗位职责
2014/03/12 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
聘任证明怎么写
2015/03/02 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
对学校的意见和建议
2015/06/04 职场文书
培训感想范文
2015/08/07 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
Go获取两个时区的时间差
2022/04/20 Golang