JQuery的Ajax跨域请求原理概述及实例


Posted in Javascript onApril 26, 2013

今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到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 对象定义方法 简单易学
Mar 22 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 #Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 #Javascript
基于jquery中children()与find()的区别介绍
Apr 26 #Javascript
基于jQuery选择器的整理集合
Apr 26 #Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 #Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 #Javascript
jquery中.add()的使用分析
Apr 26 #Javascript
You might like
php 设计模式之 工厂模式
2008/12/19 PHP
php session 检测和注销
2009/03/16 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
jQuery 性能优化指南 (1)
2009/05/21 Javascript
动态刷新 dorado树的js代码
2009/06/12 Javascript
js window.open弹出新的网页窗口
2014/01/16 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
python使用json序列化datetime类型实例解析
2018/02/11 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
python set内置函数的具体使用
2019/07/02 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
《燕子专列》教学反思
2014/02/21 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
法学专业求职信
2014/07/15 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
正规借条模板
2015/05/26 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
JavaScript流程控制(循环)
2021/12/06 Javascript
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript