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 相关文章推荐
Javascript 入门基础学习
Mar 10 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
理解javascript对象继承
Apr 17 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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 分库分表hash算法
2009/11/12 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
php文件读取方法实例分析
2015/06/20 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
微信小程序之数据绑定原理解析
2019/08/14 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
地球一小时宣传标语
2014/06/24 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS