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 相关文章推荐
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
JQuery 又谈ajax局部刷新
Nov 27 jQuery
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
elementUI table表格动态合并的示例代码
May 15 Javascript
Javascript Worker子线程代码实例
Feb 20 Javascript
angular异步验证器防抖实例详解
Mar 31 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 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
php根据身份证号码计算年龄的实例代码
2014/01/18 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
PHP多态代码实例
2015/06/26 PHP
改版了网上的一个js操作userdata
2007/04/27 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
python实时分析日志的一个小脚本分享
2017/05/07 Python
python更改已存在excel文件的方法
2018/05/03 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
原生python实现knn分类算法
2019/10/24 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
师范生教师实习自我鉴定
2013/09/27 职场文书
女方婚礼新郎答谢词
2014/01/11 职场文书
中式结婚主持词
2014/03/14 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
校长寄语大全
2014/04/09 职场文书
公司合作意向书范文
2014/07/30 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
pandas中关于apply+lambda的应用
2022/02/28 Python