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 相关文章推荐
jquery 简短右键菜单 多浏览器兼容
Jan 01 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
Vue精简版风格概述
Jan 30 Javascript
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
JavaScript实现新年倒计时效果
Nov 17 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 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
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
jQuery的框架介绍
2016/05/11 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
python字符串Intern机制详解
2019/07/01 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
python热力图实现简单方法
2021/01/29 Python
特步官方商城:Xtep
2017/03/21 全球购物
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
营业员演讲稿
2013/12/30 职场文书
工作表现自我评价
2014/02/08 职场文书
一年级语文教学反思
2014/02/13 职场文书
2015年幼师工作总结
2015/04/28 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
MySQL开启事务的方式
2021/06/26 MySQL
python 详解turtle画爱心代码
2022/02/15 Python