Angularjs学习笔记----与后端服务器通信
Posted Leo的笔记本
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angularjs学习笔记----与后端服务器通信相关的知识，希望对你有一定的参考价值。
一、使用$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 = 1;//这个只是用来测试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学习笔记----与后端服务器通信的主要内容，如果未能解决你的问题，请参考以下文章