• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > AngularJS通过$http和服务器通信详解

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含angularjs http,angularjs http.post,angularjs http.get,angularjs http跨域,angularjs http请求等相关知识,希望在学习及工作中可以帮助到您

$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){});
</div>

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

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

promise.then(function(resp){}, function(resp){})
</div>

$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');
})
</div>

总结

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

</div>

您可能想查找下面的文章:

  • 深入理解Angularjs中$http.post与$.post
  • angularjs封装$http为factory的方法
  • angularJS 发起$http.post和$http.get请求的实现方法
  • AngularJS封装$http.post()实例详解
  • 详解AngularJs HTTP响应拦截器实现登陆、权限校验
  • AngularJS $http模块POST请求实现
  • AngularJS中$http的交互问题
  • AngularJS中$http使用的简单介绍
  • 浅谈angularjs $http提交数据探索
  • 使用AngularJS 跨站请求如何解决jsonp请求问题

相关文章

  • 2017-05-30AngularJs Modules详解及示例代码
  • 2017-05-30AngularJS $on、$emit和$broadcast的使用
  • 2017-05-30Webpack 实现 AngularJS 的延迟加载
  • 2017-05-30Web前端框架Angular4.0.0 正式版发布
  • 2017-05-30使用AngularJS2中的指令实现按钮的切换效果
  • 2017-05-30浅析AngularJS中的指令
  • 2017-05-30Angular多选、全选、批量选择操作实例代码
  • 2017-05-30高效利用Angular中内置服务$http、$location等
  • 2017-05-30基于AngularJS实现页面滚动到底自动加载数据的功能
  • 2017-05-30详解angular用$sce服务来过滤HTML标签

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
    • Angular中实现树形结构视图实例代码
    • AngularJS 如何在控制台进行错误调试
    • Angular的自定义指令以及实例
    • 深入理解Angularjs中$http.post与$.post
    • angular+bootstrap的双向数据绑定实例
    • AngularJS入门教程之REST和定制服务详解
    • Angular表单验证实例详解
    • AngularJS学习第一篇 AngularJS基础知识
    • angular学习之ngRoute路由机制

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有