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 相关文章推荐
一个不错的应用,用于提交获取文章内容,不推荐用
Mar 03 Javascript
Javascript 学习笔记 错误处理
Jul 30 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 Javascript
JS 基本概念详细介绍
Oct 16 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设计模式之命令模式的应用详解
2013/05/21 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
jQuery 位置插件
2008/12/25 Javascript
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
Python中字典和JSON互转操作实例
2015/01/19 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
python获取交互式ssh shell的方法
2019/02/14 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
python 爬取小说并下载的示例
2020/12/07 Python
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
Linux Interview Questions For software testers
2013/05/17 面试题
工程造价与管理专业应届生求职信
2013/11/23 职场文书
高中生毕业自我鉴定范文
2013/12/22 职场文书
找工作求职信
2014/07/07 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
父亲去世追悼词
2015/06/23 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
MySQL系列之二 多实例配置
2021/07/02 MySQL