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,cache: boolean or Cache object,timeout: number,withCredentials: boolean  
}).success(function(data,status,config,headers){
//响应成功
}).error(function(data,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,headers) {
            //处理成功
            console.info(data);
            $scope.data = data;
            console.info(status);
            console.info(config);
            console.info(headers);
        })
        .error(function (data,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',$http) {
        //Post请求
        //默认情况下，后台接受Form参数失败
        var postData = {
            name: '李四',text: '大容量内容'
        };
        $http.post('/ashx/dataone.ashx',postData).success(function (data,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',$http) {
        //Get请求
        $http({
            method: 'GET',url: '/ashx/dataone.ashx',params: {
                name: '张三',text: '内容'
            }
        }).success(function (data,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,headers) {
            //处理成功
            console.info(data);
            $scope.data = data;
            console.info(status);
            console.info(config);
            console.info(headers);
        });
    });
</script>

Get请求成功

AngularJS $http简介1

猜你在找的Angularjs相关文章