新手帮助当前位置:万彩娱乐平台 > 新手帮助 > >

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

  

[angularjs,服务器,angularjs,服务器交互,angularjs]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');  })
  
  

总结  
  

  

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

  

(责任编辑:admin)

上一篇:万彩娱乐平台一个级联菜单(IE ONLY),不过代码很精

下一篇:jquery中的常见问题及快速解决方法小结

推荐内容

客户服务热线

010-400-12345

在线客服