JavaScript跨域调用基于JSON的RESTful API


Posted in Javascript onJuly 09, 2016

1. 基本术语

AJAX(Asynchronous JavaScript And XML,异步JavaScript和XML):AJAX是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

JSON(JavaScript Object Notation):JSON是一种轻量级的数据交换格式,可以看成是由大括号包裹起来的多个"key/value"对,格式如下:{"firstName":"Brett", "lastName":"McLaughlin", "email":"abcdefg@gmail.com"}。

Cross Domain(跨域):跨域问题是由于JavaScript语言安全限制中的同源策略造成的,当在页面上使用AJAX请求访问其他服务器的数据时,客户端就会出现跨域问题。

Same Origin Policy(同源策略):同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,域名、协议、端口均相同,即是同源。

2. JavaScript跨域解决方案

目前主要有三种JavaScript跨域解决方案:

基于iframe实现跨域:两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是HTTP)和同一端口(例如都是80)。iframe方案对域名、协议、端口的限制太多,用处不大。

基于Script标签实现跨域(JSONP方案):JSONP(JSON with Padding)是JSON的一种“使用模式”,是一种非官方的跨域数据交互协议,可用于解决主流浏览器的跨域数据访问的问题。JSONP方案的局限性在于:JSONP只能实现GET请求。

基于后台代理实现跨域(CORS方案):CORS(Cross-Origin Resource Sharing,跨域资源共享)是一个W3C标准,它允许浏览器向跨源服务器发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

3. 基于后台代理实现跨域(CORS方案)

具体解决方案如下:

① 服务器端

服务器端需要在正常的HTTP回应中增加Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等字段。

我的服务器端是用Python写的,HTTP请求调用的webob.Request。

修改办法是,在“res = req.get_response(self.app)”这行代码之后,需要增加如下几行内容:

res.headerlist.append(('Access-Control-Allow-Origin', '*')) 
res.headerlist.append(('Access-Control-Allow-Methods', 'GET, POST')) 
res.headerlist.append(('Access-Control-Max-Age', '3600')) 
res.headerlist.append(('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Max-Age, X-Auth-Token, Content-Type, Accept'))

其中,Access-Control-Allow-Origin最好限制为前端的访问地址,这样才相对安全,例如:

res.headerlist.append(('Access-Control-Allow-Origin', 'http://10.111.121.26:8080'))

另外,Access-Control-Max-Age可以设置CORS相关配置的缓存时间,这样客户端就不必每次都先进行一次预检请求(Preflight Request)。

预检请求会先向服务器端发出一个OPTIONS方法、包含“Origin”头的请求。只有该请求获得允许以后,才会发起真实的跨域请求。

所以,服务器端在对X-Auth-Token进行鉴权时还需要放过预检请求,例如:

def process_request(self, req): 
if (req.headers.get('X-Auth-Token') != 'open-sesame') and (req.method != 'OPTIONS'): 
return exc.HTTPForbidden()

② 客户端

HTTP请求需要注意到几个地方:

data需要保证是JSON格式的字符串;

contentType规定了编码格式是UTF8;

dataType规定了返回内容是JSON格式。

具体的调用代码如下:

data_param = {"timeType":"LAST_7_DAYS", "hostType":"ALL_HOSTS"} 
$.ajax({ 
url:"http://172.16.17.11:41128/dpi/webApp/eventRetrieve", 
type: "POST", 
data:JSON.stringify(data_param), 
headers:{ 
"X-Auth-Token":"open-sesame", 
"Content-Type":"application/json" 
}, 
contentType: 'text/html; charset=UTF-8', 
dataType: "json", 
success: function(data) { 
alert(data); // Object 
}, 
error: function(XMLHttpRequest, textStatus, errorThrown) { 
alert(XMLHttpRequest.status); 
alert(XMLHttpRequest.readyState); 
alert(textStatus); 
}, 
complete: function(XMLHttpRequest, textStatus) { 
} 
});

以上所述是小编给大家介绍的JavaScript跨域调用基于JSON的RESTful API的全部叙述,希望对大家有所帮助,如果大家想了解更多内容,敬请关注三水点靠木网站,谢谢!

Javascript 相关文章推荐
JavaScript网页制作特殊效果用随机数
May 22 Javascript
js loading加载效果实现代码
Nov 24 Javascript
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
javascript中最常用的继承模式 组合继承
Aug 12 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 #Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 #Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 #Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 #Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 #Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 #Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 #Javascript
You might like
linux命令之调试工具strace的深入分析
2013/06/03 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
django 自定义用户user模型的三种方法
2014/11/18 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
PyQT实现多窗口切换
2018/04/20 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
详解python pandas 分组统计的方法
2019/07/30 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
linux面试题参考答案(4)
2014/09/21 面试题
工程部经理岗位职责
2013/12/08 职场文书
优秀员工获奖感言
2014/03/01 职场文书
实习生矿工检讨书
2014/10/13 职场文书
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫