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 相关文章推荐
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 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循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
python读取浮点数和读取文本文件示例
2014/05/06 Python
Python实现一个简单的验证码程序
2017/11/03 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
python实现LRU热点缓存及原理
2019/10/29 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
什么是索引指示器
2012/08/20 面试题
家长对学生的评语
2014/04/18 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
党课培训心得体会
2014/09/02 职场文书
消费者理赔投诉书
2015/07/02 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python