一、使用$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. jQuery的编码标准和最佳实践

    不知道在哪里看到了这篇关于jQuery编码的文章,挺实用的,恰好最近在研究jQuery的基础知识,今天打开收藏夹来翻译一下,原文的英语不难,但是内容很实用,可能有大神已经翻译过了,大家看精华就行了. ...

  2. Cacti监控Centos抓包unreachable - admin prohibited

    :: 抓包发现总是有这个出现,而且是跟在GetRequest后面. 打开iptables配置: 最开始网上找的配置语句是这个, -A INPUT -p udp -m udp --sport -j AC ...

  3. 支持Java Spring MVC

    Java Spring MVC能很方便在后台返回JSON数据,所以与MiniUI进行数据交互非常简单. 1)后台处理: 在MVC控制器中,可以通过方法参数接收数据,也可以通过Request接收更复杂的 ...

  4. 关于android截图的一些方法

    这里只记录一些链接,对于我的需求,只需要, public static String createScreenShot(View v)     {        //测试截屏功能    SimpleD ...

  5. 北京易信软科信息技术有限公司-仓库管理系统V1.0

    北京易信软科您可信赖的北京软件研发服务商,公司团队有多年应用软件设计制作及开发经验,为各大企业提供软件设计.制作及维护服务,为用户提供可靠高效的应用服务平台 我们通过专业的项目实施流程,为您提供优质的 ...

  6. python3+ 模块学习 之 re

    re 模块 参考:Python3 如何优雅地使用正则表达式(详解系列) Python3 正则表达式特殊符号及用法(详细列表)    (出处: 鱼C论坛) 正则表达式 常用元字符:. ^ $ * + ? ...

  7. js+html5 +devexpress属性总结

    //获取某行某列的值 onSelectionChanged: function (selectedItems) { var data = selectedItems.selectedRowsData[ ...

  8. spring下载及部署

    网址http://repo.spring.io/release/org/springframework/spring Bean配置项 Id : 在IOC容器中此Bean唯一标识 Class : 要实例 ...

  9. log4j输出模板

    log4j.rootLogger=DEBUG, A1,A2 log4j.appender.A1.MaxFileSize=1kb#10个备份 log4j.appender.A1.MaxBackupInd ...

  10. git入门札记

    分布式版本控制(个人主机即版本库,有一台作为“中央服务器”来方便“交换”修改,管理修改 而非文件) vs.  SVN CVS git 安装后设置: git config - -global user. ...