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

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

总结

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

(0)

相关推荐

  • 详解AngularJS中$http缓存以及处理多个$http请求的方法

    $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据.在AngularJS的实际项目中,经常需要处理多个$http请求,每个$http请求返回一个promise,我们可以把多个promise放到$q.all()方法接受的一个数组实参中去. 1.处理多个$http请求 angular.module('app',[]) .controller('AppCtrl', function AppCtrl(myService){ var app = this; myService.

  • 简介AngularJS中$http服务的用法

    我们可以使用内置的$http服务直接同外部进行通信.$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象. 1.链式调用 $http服务是只能接受一个参数的函数,这个参数是一个对象,包含了用来生成HTTP请求的配置内容.这个函数返回一个promise对象,具有success和error两个方法. $http({ url:'data.json', method:'GET' }).success(function(data,header,config,status){ //响应

  • AngularJS中$http服务常用的应用及参数

    前言 $http 服务:只是简单封装了浏览器原生的XMLHttpRequest对象,接收一个参数,这个参数是一个对象,包含了用来生成HTTP请求的配置内容,这个函数返回一个promise对象,具有success和error方法. $http服务的使用场景: var promise = $http({ method:"post", // 可以是get,post,put, delete,head,jsonp;常使用的是get,post url:"./data.json"

  • 浅谈angularjs $http提交数据探索

    前两天在搞自己的项目,前端js框架用的是angularjs框架:网站整的差不多的时候出事了:那就是当我用$http.post()方法向服务器提交一些数据的时候:后台总是接收不到数据: 于是采用了其他方法暂时性替代一下: 今天正好有时间研究这个事情:网上查了很多资料:都试了试:都是不太好:但是还是给我提供了一些解决问题的思路: 正文开始:首先做了个demo如下:主要是为了比较他们的不同之处: html如下: <div class="container-fluid" data-ng-

  • angularJS之$http:与服务器交互示例

    在angularJS中与远程HTTP服务器交互时会用一个非常关键的服务-$http. $http是angular中的一个核心服务,利用浏览器的xmlhttprequest或者via JSONP对象与远程HTTP服务器进行交互. $http的使用方式和jquery提供的$.ajax操作比较相同,均支持多种method的请求,get.post.put.delete等. $http的各种方式的请求更趋近于rest风格. 在controller中可通过与$scope同样的方式获取$http对象,e.g.

  • 详解AngularJS中的http拦截

    http拦截,即$http服务允许我们与服务端交互,有时候我们希望在发出请求之前以及收到响应之后做些事情. $httpProvider包含了一个interceptors的数组. 我们这样创建一个interceptor. app.factory('myInterceptor', ['$log', function($log){ $log.debug(''); var myInterceptor = {}; return myInterceptor; }]) 接着注册interceptor. app

  • AngularJS中$http使用的简单介绍

    在AngularJS中主要使用$http服务与远程http服务器交互,其作用类似于jquery中的$.ajax服务: $http是AngularJS的一个核心服务,利用浏览器的xmlhttprequest或者via JSONP对象与远程HTTP服务器进行交互: 与$.ajax相同,支持多种method请求:get.post.put.delete等: controller中可通过与$scope同样的方式获取$http对象,形如:function controller($ http, $ scope

  • 后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法

    1.问题: 后端接收不到AngularJs中$http.post发送的数据,总是显示为null 示例代码: $http.post(/admin/KeyValue/GetListByPage, { pageindex: 1, pagesize: 8 }) .success(function(){ alert("Mr靖"); }); 代码没有错,但是在后台却接收不到数据,这是为什么呢? 用火狐监控:参数是JSON格式 用谷歌监控:传参方式是request payload 可以发现传参方式是

  • AngularJS出现$http异步后台无法获取请求参数问题的解决方法

    本文实例讲述了AngularJS出现$http异步后台无法获取请求参数问题的解决方法.分享给大家供大家参考,具体如下: angular在通过异步提交数据时使用了与jQuery不一样的请求头部和数据序列化方式,导致部分后台程序无法正常解析数据. 原理分析(网上的分析): 对于AJAX应用(使用XMLHttpRequests)来说,向服务器发起请求的传统方式是:获取一个XMLHttpRequest对象的引用.发起请求.读取响应.检查状态码,最后处理服务端的响应.整个过程示例如下: var xmlht

  • 对比分析AngularJS中的$http.post与jQuery.post的区别

    很多时候我们需要用ajax提交post数据,angularjs与jq类似,也有封装好的post. 但是jQuery的post明显比angularjs的要简单一些,人性化一些. AngularJS: 复制代码 代码如下: $http.post('do-submit.php',myData) .success(function(){     // some code }); jQuery: 复制代码 代码如下: $.post('do-submit.php', myData, function() {

随机推荐