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 相关文章推荐
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
Json解析的方法小结
Jun 22 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 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
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
python利用hook技术破解https的实例代码
2013/03/25 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
Python通过Pillow实现图片对比
2020/04/29 Python
python pymysql库的常用操作
2020/10/16 Python
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
保安拾金不昧表扬信
2014/01/15 职场文书
给同学的道歉信
2014/01/16 职场文书
秋季运动会活动方案
2014/02/05 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
不同意离婚上诉状
2015/05/23 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
遗嘱范文
2015/08/07 职场文书
初三英语教学反思
2016/02/15 职场文书
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby