一、使用$http进行XHR和JSONP请求

  1.1 XHR请求

  • GET:$http.get(url,config)
  • POST:$http.post(url,data,config)
  • PUT:$http.put(url,data,config)
  • DELETE:$http.delete(url,config)
  • HEAD:$http.head

  1.2 JSONP请求

  $http.jsonp(url,config)

  1.3 方法参数说明

  • url:调用目标URL
  • data:请求体中送出的数据
  • config:包含额外配置信息的JavaScript配置对象,对请求和响应都有影响

  1.4 config说明

  Javascript配置对象保存着很多可选项,以影响请求、相应及传送的数据。配置对象中较重要的属性如下:

  • method:所用的HTTP方法
  • url:请求的目标URL
  • params:URL的参数
  • headers:额外的请求头
  • timeout:XHR请求终止前的超时时间(单位是毫秒)
  • cache:XHR GET请求的缓存开关
  • transformRequest、transpormResponse:在与后端交换数据前或交换后,对数据进行处理的数据变换函数

  1.5 转换请求数据和相应数据

  $http.post和$http.put方法接受任何JavaScript对象(或字符串)值作为他们的data参数。如果data是JavaScript对象,则data会默认转换为JSON字符串。

  和转换请求数据一样,$http服务会试图将响应中包含的JSON字符串转换为JavaScript对象,这种转换发生在成功或失败回调之前,默认的转换行为是可以定制的。

  1.6 处理HTTP响应

  请求可能成功或者失败,AngularJS提供两种方法以注册对应这两种结果的回调;success和error。他们都接受callback函数,此函数会调用如下参数:

  • data:实际的响应数据
  • status:响应的HTTP状态
  • headers:访问HTTP响应头信息的函数
  • config:请求触发时提供的配置对象

 二、处理同源政策约束

  web浏览器强行实行同源安全政策,此政策仅对目标资源来自同源(协议、主机和端口的结合)的XHR互动授权,并对外部资源的互动加以限制。

  下面介绍三种方式来访问外部服务器的数据:

  2.1 JSONP

  利用JSONP,可以超越同源政策约束来获取数据。它的实现,有赖于浏览器能够自由地通过<script>标签从外部服务器获取JavaScript。

  JSONP调用不触发XHR请求,取而代之的是生成一个<script>标签,其源指向外部资源。

  使用方法:

$http
.jsonp('http://angularjs.org/greet.php?callback=JSON_CALLBACK',{
params:{
name:'World'
}
}).success(function(data){
$scopt.greeting=data;
});

  JSONP的限制。首先,只能用JSONP技术提交GET HTTP请求;其次,错误处理也相当麻烦,因为浏览器不会通过<script>标签暴露HTTP响应状态。在实践中,这意味着难以报告HTTP状态错误,并调用错误回调。

  JSONP也给web应用带来了一些潜在安全问题。例如众所周知的XSS攻击,所以,应认真选择JSONP请求的目标服务,只是用可信任的服务器。

  2.2 CORS

  CORS(cross-origin resource sharing)是一包W3C标准,致力于标准、可靠、安全地解决上述JSONP所面对的问题。CORS标准基于XMLHttpRequest对象,采用清晰可控的方式进行跨域AJAX请求。

  CORS的指导思想是浏览器和外界服务器需要协同(通过发送适当的请求和响应头)进行有条件的跨域请求。外界服务器需要依次配置,浏览器则必须发送恰当的请求和请求头,并翻译服务器响应以成功完成跨域请求。

  缺点:①需要配置。②$http服务在IE8和IE9下不支持CORS请求。

  2.3 服务器端代理

  JSONP并不是进行跨域请求的理想技术。CORS标准虽好,但它依然需要服务器端的额外配置,以及支持此标准的浏览器。

  如果你不能用CORS和JSONP技术,还有一种避免跨域请求的方法,那就是为外界服务器配置本地服务器做代理。应用正确的服务器配置,可以通过自己的服务器代理跨域请求,这样浏览器只会将服务器作为目标。这种技术在所有的浏览器上都有效,也不需要实现用OPTIONS请求试探。而且,我们不用冒任何安全风险。这种方法的唯一缺点就是,我们依旧需要对服务器进行配置。

三、promise API与$q 

  3.1 promise

  在异步的世界里,我们不能简单地链接函数调用,而要依靠回调,回调在仅处理一个异步事件时工作的很好,但一旦要协调多个异步事件时,事情就开始变得复杂了,这时特别难的是异步状况处理。

  但是有了Promise这种规范,它能帮助开发者用同步的方式,编写异步的代码,比如在AngularJS中可以使用这种方式:

deferABC.resolve(xxx)
.then(funcSuccess(){},funcError(){},funcNotify(){});

  当resolve内的对象成功执行,就会触发funcSuccess,如果失败就会触发funcError。

  再说的直白点,Promise就是一种对执行结果不确定的一种预先定义,如果成功,就xxxx;如果失败,就xxxx,就像事先给出了一些承诺。

  3.2 $q

  3.2.1 定义

  $q服务是AngularJS中自己封装实现的一种Promise实现。

  3.2.2 状态

  在Promise中,定义了三种状态:等待状态,完成状态,拒绝状态。

  关于状态有几个规定:

  • 1 状态的变更是不可逆的
  • 2 等待状态可以变成完成或者拒绝

  3.2.3 $q常用的几个方法

  • defer() 创建一个deferred对象,这个对象可以执行几个常用的方法,比如resolve,reject,notify等
  • all() 传入Promise的数组,批量执行,返回一个promise对象
  • when() 传入一个不确定的参数,如果符合Promise标准,就返回一个promise对象。 

  3.2.4 defer()方法

  在$q中,可以使用resolve方法,变成完成状态;使用reject方法,变成拒绝状态。

<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<div ng-controller="myctrl">
{{test}}
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.controller("myctrl",["$scope","$q",function($scope, $ q ){
$scope.test = ;//这个只是用来测试angularjs是否正常的,没其他的作用 var defer1 = $q.defer();
var promise1 = defer1.promise; promise1
.then(function(value){
console.log("in promise1 ---- success");
console.log(value);
},function(value){
console.log("in promise1 ---- error");
console.log(value);
},function(value){
console.log("in promise1 ---- notify");
console.log(value);
})
.catch(function(e){
console.log("in promise1 ---- catch");
console.log(e);
})
.finally(function(value){
console.log('in promise1 ---- finally');
console.log(value);
}); defer1.resolve("hello");
// defer1.reject("sorry,reject");
}]);
</script>
</body>
</html>

  其中defer()用于创建一个deferred对象,defer.promise用于返回一个promise对象,来定义then方法。then中有三个参数,分别是成功回调、失败回调、状态变更回调。

  其中resolve中传入的变量或者函数返回结果,会当作第一个then方法的参数。then方法会返回一个promise对象,因此可以写成

xxxx
.then(a,b,c)
.then(a,b,c)
.then(a,b,c)
.catch()
.finally()

  继续说说上面那段代码,then...catch...finally可以想想成java里面的try...catch...finally。

  3.2.5 all()方法

  这个all()方法,可以把多个primise的数组合并成一个。当所有的promise执行成功后,会执行后面的回调。回调中的参数,是每个promise执行的结果。
  当批量的执行某些方法时,就可以使用这个方法。

var funcA = function(){
console.log("funcA");
return "hello,funA";
}
var funcB = function(){
console.log("funcB");
return "hello,funB";
}
$q.all([funcA(),funcB()])
.then(function(result){
console.log(result);
});

  执行的结果

funcA
funcB
Array [ "hello,funA", "hello,funB" ]

  3.2.6 when()方法

  when方法中可以传入一个参数,这个参数可能是一个值,可能是一个符合promise标准的外部对象。

var funcA = function(){
console.log("funcA");
return "hello,funA";
}
$q.when(funcA())
.then(function(result){
console.log(result);
});

  执行的结果

hello,funA

以上部分摘自http://www.cnblogs.com/xing901022/p/4928147.html

参考文档http://www.ngnice.com/posts/126ee9cf6ddb68

Angularjs学习笔记(四)----与后端服务器通信的更多相关文章

  1. Angular2学习笔记四(之Http通信)

    前言: 在这里,我描述三个场景,即系统的注册与登录,及登录后的操作: 1.注册场景,前端页面传入用户名密码,通过一个api接口传到后台,在后台对这用户及密码进行保存: 2.登录场景,前端用户传入用户名 ...

  2. Monkey学习笔记<四>:Monkey服务器命令

    #使用如下命令将本地pc和手机连接起来 adb shell monkey --port 1080 adb forward tcp 1080:tcp 1080 telnet localhost 1080 ...

  3. AngularJS学习笔记(四) 自定义指令

    指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...

  4. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  5. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  6. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  7. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  8. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  9. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  10. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

随机推荐

  1. 由于C++编译器的分析机制所导致的声明问题

    假设我们想声明一个STL的vector类型的变量,读入文件里的信息: std::ifstream in("data.txt"); std::vector<int> da ...

  2. CM添加kafka服务

    下载所需的包: 在http://archive.cloudera.com/kafka/parcels/latest/ 选择合适parcel下载: ubuntu14.04的cdh5.5.1对应包 htt ...

  3. 黑马程序员_ Objective-c 之Foundation笔记(二)

    NSArray NSArray的创建 NSArray *array = [NSArray arrayWithObject:@“jack”]   创建单个元素 NSArray *array3 = [NS ...

  4. 怎样把excel的数据导入到sqlserver2000数据库中

    在做程序的时候有时需要把excel数据导入到sqlserver2000中,以前没从外部导入过数据,今天刚做了一下导入数据,感觉还是蛮简单的,没做过之前还想着多么的复杂呢,下面就来分享一下我是如何把ex ...

  5. 【VB6】使用VB6创建和访问Dom树【爬虫基础知识 】

    使用VB6创建和访问Dom树 关键字:VB,DOM,HTML,爬虫,IHTMLDocument 我们知道,在VB中一般大家会用WebBrowser来获取和操作dom对象. 但是,有这样一种情形,却让我 ...

  6. Windows MFC 两个OpenGL窗口显示与线程RC问题

    问题为:背景界面是一个OpenGL窗口(对话框),在其上弹出一个OpenGL窗口(模态对话框)时, 1.上方的OpenGL窗口能响应鼠标操作等并刷新: 2.当移动或放大缩小上方的OpenGL窗口时,其 ...

  7. XMLHttpRequest简单总结

    一.概念 XMLHttpRequest 对象用于在后台与服务器交换数据. XMLHttpRequest 对象是能够: 在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求数据 在页面已加载后从 ...

  8. JavaScript笔记:函数

    函数是定义一次但却可以调用或执行任意多次的代码块. 一.函数定义 javascript中的函数使用function关键字来定义,常用的函数定义分为三种形式: 声明式函数定义 function sum( ...

  9. ARToolKit for Unity环境搭建(初步搭建成功)

    最近一段时间才开始学习使用Unity3d,AR的学习使用中,先后使用了metaio SDK.vuforia SDK,但由于这两个都属于收费的,今天开始尝试使用ARToolKit.先将ARToolKit ...

  10. Unity3D NGUI 给button按钮添加单间事件

    Unity3D中, NGUI 给button按钮添加单间事件的方法很多,在这里只给推荐一种比较常用的方法. 推荐方法:使用UIListener. 1.给button组价添加上UIListener.选择 ...