jquery的ajax跨域请求原理和示例


Posted in Javascript onMay 08, 2014

今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发
JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式。分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。

什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型。使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理,根据客户端提交的callback的参数,返回一个callback(json)的数据,而客户端将会用script的方式处理返回数据,来对json数据做处理。JQuery.getJSON也同样支持jsonp的数据方式调用。

客户端JQuery.ajax的调用代码示例:

$.ajax({ 
type : "get", 
async:false, 
url : "http://www.xxx.com/ajax.do", 
dataType : "jsonp", 
jsonp: "callbackparam",//服务端用于接收callback调用的function名的参数 
jsonpCallback:"success_jsonpCallback",//callback的function名称 
success : function(json){ 
alert(json); 
alert(json[0].name); 
}, 
error:function(){ 
alert('fail'); 
} 
});

服务端返回数据的示例代码:

public void ProcessRequest (HttpContext context) { 
context.Response.ContentType = "text/plain"; 
String callbackFunName = context.Request["callbackparam"]; 
context.Response.Write(callbackFunName + "([ { name:\"John\"}])"); 
}
Javascript 相关文章推荐
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 #Javascript
javascript与有限状态机详解
May 08 #Javascript
ajax提交表单实现网页无刷新注册示例
May 08 #Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 #Javascript
js动态删除div元素基本思路及实现代码
May 08 #Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 #Javascript
jquery查找tr td 示例模拟
May 08 #Javascript
You might like
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
详解Python中的相对导入和绝对导入
2017/01/06 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
python 实现任务管理清单案例
2020/04/25 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
小学少先队活动方案
2014/02/18 职场文书
餐饮采购员岗位职责
2014/03/15 职场文书
工程负责人任命书
2014/06/06 职场文书
2014年采购工作总结
2014/11/20 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL