跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制。
下面阐述一下AngularJS中使用$http实现跨域请求数据。

AngularJS XMLHttpRequest:$http用于读取远程服务器的数据

$http.post(url, data, [config]).success(function(){ ... });
$http.get(url, [config]).success(function(){ ... });
$http.get(url, [config]).success(function(){ ... });

一、$http.jsonp【实现跨域】

1. 指定callback和回调函数名,函数名为JSON_CALLBACK时,会调用success回调函数,JSON_CALLBACK必须全为大写。
2. 指定其它回调函数,但必须是定义在window下的全局函数。url中必须加上callback。

二、$http.get【实现跨域】

1. 在服务器端设置允许在其他域名下访问

response.setHeader("Access-Control-Allow-Origin", "*"); //允许所有域名访问
response.setHeader("Access-Control-Allow-Origin", "http://www.123.com"); //允许www.123.com访问

2. AngularJS端使用$http.get()

三、$http.post【实现跨域】

1. 在服务器端设置允许在其他域名下访问,及响应类型、响应头设置

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods","POST");
response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type");

2. AngularJS端使用$http.post(),同时设置请求头信息

$http.post('http://localhost/ajax/getAllIndustryCategoty.pt',{languageColumn:'name_eu'},{'Content-Type':'application/x-www-form-urlencoded'}).success(function(data){
$scope.industries = data;
});

四、实现方式

跨域方式一【JSONP】:

方法一:

$http.jsonp("http://localhost/sitesettings/getBadgeInfo.pt?jsonp=JSON_CALLBACK&siteid=137bd406").success(function(data){ ... });
// The name of the callback should be the string JSON_CALLBACK.

方法二【返回值,需要使用对应callback方法接收,但如何置于$scope???】:

$http.jsonp("http://localhost/sitesettings/getBadgeInfo.pt?jsonp=badgeabc&siteid=137bd406");
function badgeabc(data){ ... }
public String execute() throws Exception {
String result = FAIL;
response.setHeader("", "");
SiteHandlerAction siteHandlerAction = (SiteHandlerAction)BeansFactory.getBean(SiteHandlerAction.class);
BadgeHandlerAction badgeHandlerAction = (BadgeHandlerAction)BeansFactory.getBean(BadgeHandlerAction.class);
if("".equals(siteid) || siteid == null || StringUtils.isBlank("jsonp")){
result = FAIL;
}else{
Site site = siteHandlerAction.find(siteid);
UserBadgeStatus userBadgeStatus = badgeHandlerAction.getUserBadgeStatus(site.getId());
if(userBadgeStatus != null){
result = "{\"t\":"+userBadgeStatus.getStyle()+",\"l\":"+userBadgeStatus.getSuspend_location()+",\"s\":"+site.getId()+"}";
JSONObject jsonObj = JSONObject.fromObject(result);
String json = jsonObj.toString();
result = jsonp + "(" + json + ")";
}
}
PrintWriter write = response.getWriter();
write.print(result);
write.flush();
write.close();
return NONE;
}

跨域方式二【$http.get()】:

function getAdustryController($scope,$http){
$http.get('http://localhost/ajax/getAllIndustryCategoty.pt?languageColumn=name_eu').success(function(data){
$scope.industries = data;
});
}

跨域方式三【$http.post()】:

function getAdustryController($scope,$http){
$http.post('http://localhost/ajax/getAllIndustryCategoty.pt',{languageColumn:'name_eu'},{'Content-Type':'application/x-www-form-urlencoded'}).success(function(data){
$scope.industries = data;
});
}
// java端支持跨域请求
public String execute(){
response.setHeader("Access-Control-Allow-Origin", "*"); //允许哪些url可以跨域请求到本域
response.setHeader("Access-Control-Allow-Methods","POST"); //允许的请求方法,一般是GET,POST,PUT,DELETE,OPTIONS
response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type"); //允许哪些请求头可以跨域 SiteHandlerAction SiteHandler = (SiteHandlerAction) BeansFactory.getBean(SiteHandlerAction.class);
List list = SiteHandler.getAllIndustryCategory(); //所有的分类集合
JSONArray jsonArray = JSONArray.fromObject(list); //将list转为json
String json = jsonArray.toString(); //转为json字符串
try {
PrintWriter write = response.getWriter();
write.print(json);
write.close();
} catch (IOException e) {
e.printStackTrace();
}
return NONE;
}
{{ industry.id }} {{ industry.name_ch }} {{ industry.name_eu }} {{ industry.name_jp }}

转载自:http://www.bkjia.com/JavaScript/977935.html

大家会自然想到只有一个字母之差的JSON吧~

JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不是一回事儿

JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿最近比较火的谍战片来打个比方,JSON是地下党们用来书写和交换情报的“暗号”,而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式。看到没?一个是描述信息的格式,一个是信息传递双方约定的方法。

浏览器是存在同源策略这个机制的,在全局层面禁止了页面加载或执行与自身来源不同的域的任何脚本。

JSONP是一种可以绕过浏览器的安全限制,从不同的域请求数据的方法。

Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>);

如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理;JSON的纯字符数据格式可以简洁的描述复杂数据,被js原生支持,所以在web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

JSONP的原理是通过<script>标签发起一个GET请求来取代XHR请求。JSONP生成一个<script>标签并插到DOM中,然后浏览器会接管并向src属性所指向的地址发送请求。

当服务器返回请求时,响应结果会被包装成一个JavaScript函数,并由该请求所对应的回调函数调用。

AngularJS在$http服务中提供了一个JSONP辅助函数。通过$http服务的jsonp方法可以发送请求,如下所示:

$http .jsonp("https://api.github.com?callback=JSON_CALLBACK") .success(function(data) {

  // 数据
});

当请求被发送时,AngularJS会在DOM中生成一个如下所示的<script>标签:

  <script src="https://api.github.com?callback=angular.callbacks._0" type="text/javascript"></script>

注意,JSON_CALLBACK被替换成了一个特地为此请求生成的自定义函数。当支持JSOPN的服务器返回数据时,数据会被包装在由AngularJS生成的具名函数angular.callbacks._0中在这个例子中,GitHub服务器会返回包含在回调函数中的JSON数据,响应看起来如下所示: 

 // 简写  

  angular.callbacks._0({

    ‘meta‘: { 
      ‘X-RateLimit-Limit‘: ‘60‘, 
      ‘status‘: 200 
    }, 
    ‘data‘: { 
      ‘current_user_url‘: ‘https://api.github.com/user‘ 
    } 
  }) 
当AngularJS调用指定的回调函数时会对$http的promise对象进行resolve。当我们自己开发支持JSONP的后端服务时,要确保响应的数据被包含在请求所指定的回调函数中。使用JSONP需要意识到潜在的安全风险。首先,服务器会完全开放,允许后端服务调用应用中的任何JavaScript。不受我们控制的外部站点(或者蓄意攻击者)可以随时更改脚本,使我们的整个站点变得脆弱。服务器或中间人有可能会将额外的JavaScript逻辑返回给页面,从而将用户的隐私数据暴露出来。由于请求是由<script>标签发送的,所以只能通过JSONP发送GET请求。并且脚本的异常也很难处理。使用JSONP一定要谨慎,同时只跟信任并可以控制的服务器进行通信。

一句话就是利用script标签绕过同源策略,获得一个类似这样的数据,jsonpcallback是页面存在的回调方法,参数就是想得到的json。

jQuery中jsonp的使用

myUrl = "http://localhost:8090/api/test";

$.ajax({
  type:"GET",
  url:myUrl,
  dataType:"jsonp",
  jsonp:"callback",
  jsonpCallback:"jsonpCallback",
  success:function(data){
    alert(data.msg);
  }
}); function jsonpCallback(data){
  alert(data);
}
1.jsonp只能使用get请求,解决同源问题,返回javascript代码,因为请求javascript文件是没有同源问题的。
2.当请求数据类型为jsonp时,会将callback=jsonpCallback加在url上,http://localhost:8090/api/testcallback=jsonpCallback
3.前台javascript中定义jsonpCallback函数,此函数必须定义在window下,也就是全局的函数,否则找不到。
4.后台获取请求的callback参数值jsonpCallback,返回字符串"jsonpCallback(result)",result为返回结果。
5.请求返回的是script tag,首先会调用jsonpCallback函数,不管是否找到该函数,都会调用success函数。
6.如果没有定义jsonp和jsonpCallback,jsonp默认为"callback",jsonpCallback会是Jquery自动生成的函数名。

angularJS中jsonp的使用

myUrl = "http://localhost:8090/api/testcallback=JSON_CALLBACK";

$http.jsonp(myUrl).success(
  function(data){
    alert(data);
  }
); 1.angularJS中使用$http.jsonp函数
2.指定callback和回调函数名,函数名为JSON_CALLBACK时,会调用success回调函数,JSON_CALLBACK必须全为大写。
3.也可以指定其它回调函数,但必须是定义在window下的全局函数。
4.url中必须加上callback
5.当callback为JSON_CALLBACK时,只会调用success,即使window中有JSON_CALLBACK函数,也不会调用该函数。

AngularJS实现跨域请求的更多相关文章

  1. Angularjs之如何在跨域请求中传输Cookie

    一般情况我们在使用WebApi之类的技术时,都会遇到跨域的问题,这个只需要在服务端做一下处理即可. 如果这些GET或POST请求不需要传递Cookie数据的话,就没什么问题了,但如果需要,那么会发现 ...

  2. AngularJS跨域请求

    本文主要针对网上各种跨域请求的总结,并加入自己的验证判断,实现工作中遇到的跨域问题.所涉及到的领域很小,仅仅局限于:AngularJS CORS post 并同时需要实现json数据传送给服务器. 首 ...

  3. angularjs+webapi2 跨域Basic 认证授权(二)

    在上一篇中大概演示了 整个认证授权的过程.今天在这篇博客中将结合上一篇的例子继续在跨域的情况 我们用ionic 写一个简单的页面 值得注意的是 在ionic.bundle.js 里面集成了angula ...

  4. Chrome本地跨域请求设置,实现HTML模板页

    按照需求,公司现在需要通过第三方的API反馈的数据,进行在本地就可以打开的静态页面程序(完全脱离IIS等服务器).为了更好的维护项目,需要实现静态HTML引入HTML模板,完成ASP.NET模板页的类 ...

  5. Laravel中的ajax跨域请求

    最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...

  6. 跨域请求——WebClient通过get和post请求api

    AJAX不可以实现跨域请求,经过特殊处理才行.一般后台可以通过WebClient实现跨域请求~ //get 请求        string url = string.Format("htt ...

  7. 原生js封装ajax,实现跨域请求

    描述: 需要ajax跨域请求,用cors跨域方案.服务端设置: header('Access-Control-Allow-Origin: http://front.ls-la.me'); header ...

  8. 关于试用jquery的jsonp实现ajax跨域请求数据的问题

    我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...

  9. 【JavaScript】--重点解析之跨域请求

    JSON JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. JSON是用字符串来表示Javascript对象,例如可以在django中发送一个JSON格式 ...

随机推荐

  1. Eclipse Source not found

      Eclipse debug模式下找不到Java源文件 CreateTime--2018年3月19日10:43:39 Author:Marydon 与MyEclipse不同,每次Eclipse导入新 ...

  2. windows登陆密码破解方法之一

    网上的一些人让别人进入命令提示符安全模式,我比较奇怪如果没有密码怎么进去?能进去干嘛还要进去? 本笨方法的原理主要是利用登陆界面的一些程序入口,把它当成后门来使用,比如win7登陆界面上除了输密码的地 ...

  3. JavaScript-各种插件

    上传插件: 首推:uploadify http://www.admin10000.com/document/2980.html 滚动条插件: http://www.admin10000.com/doc ...

  4. C++知识整理(进制)

    ++输出二进制.十进制.八进制和十六进制总结 分类: C++ 2013-01-14 02:26 592人阅读 评论(0) 收藏 举报 在C++中,默认状态下,数据按十进制输入输出.如果要求按八进制或十 ...

  5. BasicAuth和OAuth

    参考资料 百度百科BasicAuth 维基百科OAuth BasicAuth基本授权 BasicAuth又叫HttpAuth,它非常简单.例如你访问一个页面时,会弹出用户名密码框 它的优点是:简单,只 ...

  6. 马哥 Linux文本处理和文件查找 笔记

    grep: Global RE(Regular Expression) Printing文本过滤工具,能够实现根据指定的"模式(Pattern)"逐行搜索文件内容,并将匹配到的行显 ...

  7. DBA_实践指南系列2_Oracle Erp R12系统安装配置设定Setup(案例)

    2013-12-02 Created By BaoXinjian

  8. System V 共享内存区

    1.概述 系统调用mmap通过映射一个普通文件实现共享内存.System V 则是通过映射特殊文件系统shm中的文件实现进程间的共享内存通信.也就是说,每个共享内存区域对应特殊文件系统shm中的一个文 ...

  9. Linux常见的进程调度算法

    进程调度:在操作系统中调度是指一种资源分配. 调度算法是指: 根据系统的资源分配策略所规定的资源分配算法. 操作系统管理了系统的有限资源,当有多个进程(或多个进程发出的请求)要使用这些资源时,因为资源 ...

  10. UVa 10298 - Power Strings

    题目:求一个串的最大的循环次数. 分析:dp.KMP,字符串.这里利用KMP算法. KMP的next函数是跳跃到近期的串的递归结构位置(串元素取值0 ~ len-1): 由KMP过程可知: 假设存在循 ...