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 页面载入进度条实现代码
Feb 08 Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 Javascript
单线程JavaScript实现异步过程详解
May 19 Javascript
vue使用screenfull插件实现全屏功能
Sep 17 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生成静态页面详解
2006/11/19 PHP
php $_SERVER当前完整url的写法
2009/11/12 PHP
php 短链接算法收集与分析
2011/12/30 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
Python中map和列表推导效率比较实例分析
2015/06/17 Python
python实现二叉树的遍历
2017/12/11 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
详解python算法之冒泡排序
2019/03/05 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
什么是接口(Interface)?
2013/02/01 面试题
开工仪式主持词
2014/03/20 职场文书
社区交通安全实施方案
2014/03/22 职场文书
学习方法演讲稿
2014/05/10 职场文书
关于读书的活动方案
2014/08/14 职场文书
学习型党组织心得体会
2014/09/12 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书