我们可以使用内置的 $http 服务直接同外部进行通信.$http 服务只是简单的封装了浏览器原生的 XMLHttpRequest 对象.
1, 链式调用
$http 服务是只能接受一个参数的函数, 这个参数是一个对象, 包含了用来生成 HTTP 请求的配置内容. 这个函数返回一个 promise 对象, 具有 success 和 error 两个方法.
- $http({
- url:'data.json',
- method:'GET'
- }).success(function(data,header,config,status){
- // 响应成功
- }).error(function(data,header,config,status){
- // 处理响应失败
- });
2, 返回一个 promise 对象
- var promise=$http({
- method:'GET',
- url:"data.json"
- });
由于 $http 方法返回一个 promise 对象, 我们可以在响应返回时用 then 方法来处理回调. 如果使用 then 方法, 会得到一个特殊的参数, 它代表了相应对象的成功或失败信息, 还可以接受两个可选的函数作为参数. 或者可以使用 success 和 error 回调代替.
- promise.then(function(resp){
- //resp 是一个响应对象
- },function(resp){
- // 带有错误信息的 resp
- });
或者这样:
- promise.success(function(data,status,config,headers){
- // 处理成功的响应
- });
- promise.error(function(data,status,hedaers,config){
- // 处理失败后的响应
- });
then() 方法与其他两种方法的主要区别是, 它会接收到完整的响应对象, 而 success() 和 error() 则会对响应对象进行析构.
3, 快捷的 get 请求
$http.get('/api/users.json');
get() 方法返回 HttpPromise 对象.
还可以发送比如: delete/head/jsonp/post/put 函数内可接受参数具体参照 148 页
以再发送 jsonp 请求举例说明: 为了发送 JSONP 请求, 其中 url 必须包含 JSON_CALLBACK 字样.
jsonp(url,config) 其中 config 是可选的
var promise=$http.jsonp("/api/users.json?callback=JSON_CALLBACK");
4, 也可以将 $http 当做函数来使用, 这时需要传入一个设置对象, 用来说明如何构造 XHR 对象.
- $http({
- method:'GET',
- url:'/api/users.json',
- params:{
- 'username':'tan'
- });
其中设置对象可以包含以下主要的键:
method
可以是: GET/DELETE/HEAD/JSONP/POST/PUT
url: 绝对的或者相对的请求目标
params(字符串 map 或者对象)
这个键的值是一个字符串 map 或对象, 会被转换成查询字符串追加在 URL 后面. 如果值不是字符串, 会被 JSON 序列化.
比如这个:
- // 参数会转为? name=ari 的形式
- $http({
- params:{'name':'ari'}
- });
- data(字符串或者对象)
这个对象中包含了将会被当作消息体发送给服务器的数据. 通常在发送 POST 请求时使用.
从 AngularJS 1.3 开始, 它还可以在 POST 请求里发送二进制数据. 要发送一个 blob 对象, 你可以简单地通过使用 data 参数来传递它.
例如:
- var blob=new Blob(['Hello world'],{type:'text/plain'});
- $http({
- method:'POST',
- url:'/',
- data:blob
- });
4, 响应对象
AngularJS 传递给 then() 方法的响应对象包含了四个属性.
data: 这个数据代表转换过后的响应体 (如果定义了转换的话)
status: 响应的 HTTP 状态码
headers: 这个函数是头信息的 getter 函数, 可以接受一个参数, 用来获取对应名字值
例如, 用如下代码获取 X-Auth-ID 的值:
- $http({
- method: 'GET',
- url: '/api/users.json'
- }).then (resp) {
- // 读取 X-Auth-ID
- resp.headers('X-Auth-ID');
- });
config: 这个对象是用来生成原始请求的完整设置对象.
statusText(字符串): 这个字符串是响应的 HTTP 状态文本.
5, 缓存 HTTP 请求
默认情况下,$http 服务不会对请求进行本地缓存. 在发送单独的请求时, 我们可以通过向 $http 请求传入一个布尔值或者一个缓存实例来启用缓存.
- $http.get('/api/users.json',{ cache: true })
- .success(function(data) {})
- .error(function(data) {});
第一次发送请求时,$http 服务会向 / api/users.json 发送一个 GET 请求. 第二次发送同一个 GET 请求时,$http 服务会从缓存中取回请求的结果, 而不会真的发送一个 HTTP GET 请求.
在这个例子里, 由于设置了启用缓存, AngularJS 默认会使用 $cacheFactory, 这个服务是 AngularJS 在启动时自动创建的.
如果想要对 AngularJS 使用的缓存进行更多的自定义控制, 可以向请求传入一个自定义的缓存实例代替 true.
学习 angular, 个人推荐书籍AngularJS 权威教程电子 PDF 版地址如下: http://www.jb51.net/books/255696.html
来源: http://www.jb51.net/article/140168.htm