JavaScript跨域调用基于JSON的RESTful API_javascript技巧

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的全部叙述,希望对大家有所帮助,如果大家想了解更多内容,敬请关注网站,谢谢!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索json
, api
js跨域调用restful
restful api 跨域、restful json api、restful api json例子、restful api返回json、javascript json api,以便于您获取更多的相关知识。

时间: 2024-09-17 04:52:07

JavaScript跨域调用基于JSON的RESTful API_javascript技巧的相关文章

ajax跨域调用webservice的实现代码_javascript技巧

最近ajax访问webservice遇到跨域的问题,网上搜索资料,总结如下(很多都是觉得人家总结不错的复制下来) <<用JSON来传数据,靠JSONP来跨域>> 先上我的已实现代码: 前端代码: $.ajax({ type: "get", url: "http://localhost/Service1.asmx/getElevatorStatusJsonData?jsoncallback=?", dataType: "jsonp&q

javascript跨域调用JSON数据示例

js原生态写法  代码如下 复制代码 <script type="text/javascript">      function urljson(o) {          //o=eval('('+o+')');          for(var i in o) {              alert(i+":"+o);//循环输出a:1,b:2,etc.          }      }      var jsonp=document.creat

JavaScript跨域调用、JSONP、CORS与ASP.NET Web API[共8篇]

[第1篇] 同源策略与JSONP 浏览器是访问Internet的工具,也是客户端应用的宿主,它为客户端应用提供一个寄宿和运行的环境.而这里所说的应用,基本是指在浏览器中执行的客户端JavaScript程序.虽然是一种解释性的脚本语言,JavaScript其实是无比强大的,原则上来讲它可以做任何事.但是在能够在JavaScript脚本并不都是值得信赖的,所以浏览器必须对JavaScript的执行作相应的限制,这就是"同源策略(Same Origin Policy)".JavaScript

javascript跨域方法、原理以及出现问题解决方法(详解)_javascript技巧

javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域      基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain

javascript跨域原因以及解决方案分享_javascript技巧

产生跨域问题的原因 跨域问题是浏览器同源策略限制,当前域名的js只能读取同域下的窗口属性. 跨域问题产生的场景 当要在在页面中使用js获取其他网站的数据时,就会产生跨域问题,比如在网站中使用ajax请求其他网站的天气.快递或者其他数据接口时以及hybrid app中请求数据,浏览器就会提示以下错误.这种场景下就要解决js的跨域问题. XMLHttpRequest cannot load http://你请求的域名. No 'Access-Control-Allow-Origin' header

常见的javascript跨域通信方法_javascript技巧

本文主要介绍几种常见的javascript跨域通信方法.首先讲解一下JSONP.1.JSONP JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他

利用jsonp跨域调用百度js实现搜索框智能提示_javascript技巧

项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择. 使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript也可以实现跨域调用js.  ok,了解了jsonp的原理和应用后,我们看看百度的智能提示是如何做的 在chrome的调试窗口下看看百度搜索发出的请求.当输入关键字"a",请求如图:  用firebug看下请求的参数,如图: 请求方式:get请求请求参数:wd明显是要搜索的关键字:cb是请

ASP.NET MVC中EasyUI的datagrid跨域调用实现代码_jquery

最近项目中需要跨域调用其他项目的数据,其他项目也是使用的EasyUI的datagrid组件,开始以为直接在datagrid的url属性定义为其他项目的url地址即可,可是测试下发现的确是返回了json数据但是json数据提示"invalid label" 错误,网上搜索了下错误解决办法,参考 "JavaScript处理Json的invalid label错误解决办法"的方法利用datagrid的loadData方法加载并转换了json还是提示上述错误,感觉原因不在格

深入分析Javascript跨域问题_javascript技巧

跨域是什么? 假设a.com/get.html需要获取b.com/data.html中的数据,而这里a.com和b.com并不是同一台服务器,这就是跨域跨域会涉及到Javascript的同源策略,简单来说就是为了保护网站的安全,不被外域(非同源)服务器的js修改本网站内容. 引用一个表格,看一下引起跨因的条件有哪些: 但是有时候我们确实需要这么做,那么我们有哪些方法呢? 1.JsonP 提到跨域不能不先提及jsonp.jsonp其实是JavacScript Object Notation wit