AngularJS $http简介1

我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。

1、链式调用
$http服务是只能接受一个参数的函数，这个参数是一个对象，包含了用来生成HTTP请求的配置内容。这个函数返回一个promise对象，具有success和error两个方法。

$http({
method: string,
url: string,
params: object,
data: string or object,
headers: object,
transformRequest: function transform(data, headersGetter) or an array of functions,
transformResponse: function transform(data, headersGetter) or an array of functions,
cache: boolean or Cache object,
timeout: number,
withCredentials: boolean
}).success(function(data,status,config,headers){
//响应成功
}).error(function(data,status,config,headers){
//处理响应失败
});

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

2、响应对象

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

这个对象是用来生成原始请求的完整设置对象。

status（字符串）

这个字符串是响应的HTTP状态文本。
3.GET请求实例

<div class="container" ng-app="myApp" ng-controller="myCtrl">
<div class="alert alert-danger">
真实姓名：{{data.RealName}}
<br />
{{data}}
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
//Get请求
$http.get('/ashx/dataone.ashx', {
params: { name: '张三' }
}).success(function (data, status, config, headers) {
//处理成功
console.info(data);
$scope.data = data;
console.info(status);
console.info(config);
console.info(headers);
})
.error(function (data, status, config, headers) {
//响应失败
console.info(status);
console.info(headers);
console.info(config);
console.info(data);

});
});
</script>

4.POST请求实例

<div class="container" ng-app="myApp" ng-controller="myCtrl">
<div class="alert alert-danger">
真实姓名：{{data.RealName}}
<br />
{{data}}
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
//Post请求
//默认情况下，后台接受Form参数失败
var postData = {
name: '李四',
text: '大容量内容'
};
$http.post('/ashx/dataone.ashx', postData).success(function (data, status, config, headers) {
//处理成功
console.info(data);
$scope.data = data;
console.info(status);
console.info(config);
console.info(headers);
})
.error(function (data, status, config, headers) {
//响应失败
console.info(status);
console.info(headers);
console.info(config);
console.info(data);

});
}).config(function ($httpProvider) {
// 头部配置
//$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
//$httpProvider.defaults.headers.post['Accept'] = 'application/json, text/javascript, */*; q=0.01';
//$httpProvider.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest';
});
</script>

5.$http请求实例

<div class="container" ng-app="myApp" ng-controller="myCtrl">
<div class="alert alert-danger">
真实姓名：{{data.RealName}}
<br />
{{data}}
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
//Get请求
$http({
method: 'GET',
url: '/ashx/dataone.ashx',
params: {
name: '张三', text: '内容'
}
}).success(function (data, status, config, headers) {
$scope.data = data;
console.info(data);
});

//Post请求
//默认情况下，后台接受Form参数失败
var postData = {
name: '李四',
text: '大容量内容'
};
$http({
url: '/ashx/dataone.ashx',
method:'POST',
data:postData
}).success(function (data, status, config, headers) {
//处理成功
console.info(data);
$scope.data = data;
console.info(status);
console.info(config);
console.info(headers);
});
});
</script>

Get请求成功



更多：

新版本：Angular 1.6提示$http.get(...).success is not a
function

使用$watch来监视属性或对象的变化