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 有趣而诡异的数组
Apr 06 Javascript
javscript对象原型的一些看法
Sep 19 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
zTree节点文字过多的处理方法
Nov 24 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 Javascript
原生js实现弹幕效果
Nov 29 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
Session保存到数据库的php类分享
2011/10/24 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
pymongo中group by的操作方法教程
2019/03/22 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
Pytorch之finetune使用详解
2020/01/18 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
眼镜促销方案
2014/03/15 职场文书
空气环保标语
2014/06/12 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
美容院管理规章制度
2015/08/05 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书