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结合css实现网页换肤功能
Nov 02 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
Vue.js快速入门教程
Sep 07 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
js匿名函数使用&传参(实例)
Sep 08 Javascript
js时间戳与日期格式之间转换详解
Dec 11 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
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
获得Google PR值的PHP代码
2007/01/28 PHP
PHP游戏编程25个脚本代码
2011/02/08 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
JavaScript中的其他对象
2008/01/16 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
Angular.js之作用域scope'@','=','&'实例详解
2017/02/28 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
python的Tqdm模块的使用
2018/01/10 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
python K近邻算法的kd树实现
2018/09/06 Python
python扫描线填充算法详解
2020/02/19 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
夜大毕业生自我鉴定
2013/10/31 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
团队拓展活动方案
2014/08/28 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
保证书格式
2015/01/16 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
严以律己学习心得体会
2016/01/13 职场文书
领导干部学习心得体会
2016/01/23 职场文书
python绘制箱型图
2021/04/27 Python
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python