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 相关文章推荐
JavaScript 获取当前时间戳的代码
Aug 05 Javascript
jqeury eval将字符串转换json的方法
Jan 20 Javascript
javascript 使用 NodeList需要注意的问题
Mar 04 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
简单理解vue中Props属性
Oct 27 Javascript
javascript中的隐式调用
Feb 10 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
js中arguments对象的深入理解
May 14 Javascript
javascript实现电商放大镜效果
Nov 23 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
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
ThinkPHP视图查询详解
2014/06/30 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
不安全的常用的js写法
2009/09/15 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
python将图片文件转换成base64编码的方法
2015/03/14 Python
python实现百万答题自动百度搜索答案
2018/01/16 Python
python七夕浪漫表白源码
2019/04/05 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
django 多数据库及分库实现方式
2020/04/01 Python
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
中专自我鉴定范文
2013/10/16 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
大学生活动总结模板
2014/07/02 职场文书
导游欢迎词范文
2015/01/23 职场文书
监考失职检讨书
2015/01/26 职场文书
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技