jquery下利用jsonp跨域访问实现方法


Posted in Javascript onJuly 29, 2010
$.ajax({ 
async:false, 
url: '', // 跨域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); 
} }, 
complete: function(XMLHttpRequest, textStatus){ 
}, 
error: function(xhr){ 
//jsonp 方式此方法不被触发 
//请求出错处理 
alert("请求出错(请检查相关度网络状况.)"); 
} 
});

$.getJSON(url+"?callback=?", 
function(json){ });

这种方式其实是上例$.ajax({..}) 的一种高级封装。

在服务端通过获得callback参数(如:jsonp*****)得到jQuery端随后要回调的
然后返回类似:"jsonp*****("+要返回的json数组+")";
jquery就会通过回调方法动态加载调用这个:jsonp*****(json数组);
这样就达到了跨域数据交换的目的.

JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患。

注意:jquey是不支持post方式跨域的。
参考:http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/

Javascript 相关文章推荐
JScript中的undefined和"undefined"的区别
Mar 08 Javascript
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 Javascript
openlayers4实现点动态扩散
Aug 17 Javascript
jquery-easyui关闭tab自动切换到前一个tab
Jul 29 #Javascript
jquery 图片轮换效果
Jul 29 #Javascript
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 #Javascript
基于jQuery制作迷你背词汇工具
Jul 27 #Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 #Javascript
js操作二级联动实现代码
Jul 27 #Javascript
jquery.jstree 增加节点的双击事件代码
Jul 27 #Javascript
You might like
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
简单的分页代码js实现
2016/05/17 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
python斐波那契数列的计算方法
2018/09/27 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
Django stark组件使用及原理详解
2019/08/22 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
什么是数组名
2012/05/10 面试题
星空联盟C# .net笔试题
2014/12/05 面试题
介绍一下Linux中的链接
2016/05/28 面试题
百度软件工程师职位
2013/02/14 面试题
网站编辑求职信
2013/10/17 职场文书
自荐信结尾
2013/10/27 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
学生犯错保证书
2015/05/09 职场文书