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中的有名函数和无名函数
Oct 17 Javascript
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
Js组件的一些写法
Sep 10 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 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
php 使用array函数实现分页
2015/02/13 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
Python复制文件操作实例详解
2015/11/10 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
Python封装原理与实现方法详解
2018/08/28 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
详解Python的循环结构知识点
2019/05/20 Python
selenium+python环境配置教程详解
2019/05/28 Python
Python全栈之列表数据类型详解
2019/10/01 Python
Python连接字符串过程详解
2020/01/06 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
flask框架中的cookie和session使用
2021/01/31 Python
单位单身证明范本
2014/01/11 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
房地产广告策划方案
2014/05/15 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
公司表扬信格式
2015/05/04 职场文书
分享3个非常实用的 Python 模块
2022/03/03 Python
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL