AngularJS通过$http和服务器通信详解


Posted in Javascript onSeptember 21, 2016

$http

AngularJS提供了$http服务来同服务端进行通信,$http服务队浏览器的XMLHttpRequest对象进行了封装,让我们可以以ajax的方式来从服务器请求数据。

在AngularJS中与远程HTTP服务器交互时会用一个非常关键的服务-$http。

      1、$http是angular中的一个核心服务,利用浏览器的xmlhttprequest或者via JSONP对象与远程HTTP服务器进行交互。

      2、$http的使用方式和jquery提供的$.ajax操作比较相同,均支持多种method的请求,get、post、put、delete等。

      3、$http的各种方式的请求更趋近于rest风格。

      4、在controller中可通过与$scope同样的方式获取$http对象,e.g. function controller($scope,$http){}

下面进行$http服务的使用说明,调用如下:

$http(config).success(function(data,status,headers,config){}).error(function(data,status,headers,config){});

$http服务是一个接受一个参数的函数,参数的类型是对象,用来配置生成的http的请求,该函数返回一个promise对象

var promise = $http({
 method:'GET',
 url:'/api/user.json'
});

promise.then(function(resp){}, function(resp){})

$http请求的配置对象

$http()接受的配置对象可以包含以下属性:

     method:http请求方式,可以为GET,DELETE,HEAD,JSONP,POST,PUT

     url:字符串,请求的目标

     params:字符串或者对象,会被转换成为查询字符串追加的url后面

     data:在发送post请求时使用,作为消息体发送到服务器

     headers:一个列表,每个元素都是一个函数,返回http头

     xsrfHeaderName(字符串):保存XSFR令牌的http头的名称

     xsrfCookieName:保存XSFR令牌的cookie名称

     transformRequest:函数或者函数数组,用来对http请求的请求体和头信息进行转换,并返回转换后的结果。

     transformResponse:函数或者函数数组,用来对http响应的响应体和头信息进行转换,并返回转换后的结果。

     cache:布尔类型或者缓存对象,设置之后angular会缓存get请求。

     timeout:数值,延迟请求

     responseType:字符串,响应类型。可以为arraybuffer, blob,document,json, text, moz-blob, moz-chunked-text, moz-chunked-

     arraybuffer

$http请求的响应对象

     angular传递给then方法的响应对象包括以下几个属性

     data:转换之后的响应体

     status:http响应状态码

     headers:头信息

     config:生成原始请求的设置对象

     statusText:http响应状态的文本

拦截器

angular中通过拦截器我们可以从全局层面对请求以及响应进行拦截。

使用拦截器之前,我们通过factory()声明一个服务,然后通过$httpProvider注册拦截器。拦截器分为四种,两种成功拦截器,两种失败拦截器。

angular.module('test', []).factory('testInterceptor', function($q){
 var interceptor = {
 'request':function(config){
 return config;
 },
 'response':function(resp){
 return response;
 },
 'requestError':function(rejection){
 return $q.reject(rejection);
 },
 'responseError':function(rejection){
 return rejection
 }
 }
 return interceptor;
})

angular.module('test', []).config(function($httpProvider){
 $httpProvider.interceptors.push('testInterceptor');
})

总结

以上就是这篇文章的全部内容,希望能对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
asp批量修改记录的代码
Jun 25 Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
Jul 18 Javascript
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
JavaScript 拖拽实例代码
Sep 21 #Javascript
Angularjs中controller的三种写法分享
Sep 21 #Javascript
jQuery中Find选择器用法示例
Sep 21 #Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 #Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 #Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 #Javascript
AngularJS 单元测试(二)详解
Sep 21 #Javascript
You might like
php调用mysql存储过程
2007/02/14 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
three.js 入门案例详解
2018/01/23 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
python实现将文本转换成语音的方法
2015/05/28 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
Python 支付整合开发包的实现
2019/01/23 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
学习2014年全国两会心得体会
2014/03/12 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
成本会计岗位职责
2015/02/03 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
SQL Server实现分页方法介绍
2022/03/16 SQL Server