angular ajax请求 - Githubissues

angular ajax请求（包含官方版本跟封装版本）

$http是 AngularJS应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据，是一个异步请求数据的方法。

$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

官方版本

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>angular-ajax</title>
</head>
<body>
    <div ng-controller="myCtrl">
        <p>{{name}}</p>
    </div>
</body>
<script src="js/angular.js"></script>
<script>
    var app = angular.module('myApp',[]);
    app.controller('myCtrl',['$scope','$http',function($scope,$http){
        $scope.name = '';
        $http.get('test.php',{
            params:{

            }
        }).success(function(data){
            console.log(data);
            $scope.name = data.name;
        })
    }])
</script>
</html>

php代码如下

<?php
    echo json_encode(array("name"=>"naruto"));
?>

封装版本（通过angular服务进行封装）

<!-- 使用angular服务封装$http方法 -->
<!-- 注意自己封装的方法命名的时候不要加上$，便于与angular自带的方法区分开 -->
<script>
    var app = angular.module('myApp',[]);
    app.controller('myCtrl',['$scope','http',function($scope,http){
        http.get('test.php',{
            params:{

            }
        }).success(function(data){
            console.log(data)
        })
    }])
    app.service('http',function(){
        var xmlhttp = new XMLHttpRequest();
        return {
            get:function(url,params){
                xmlhttp.open('GET',url,true);
                xmlhttp.send();
                return this;
            },
            success:function(callback){
                xmlhttp.onreadystatechange = function(){
                    if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
                        callback(xmlhttp.responseText)
                    }
                }
                return this;
            },
            error:function(){

            }
        }

    })
</script>

Narutocc / angular

angular ajax请求 #1

angular ajax请求（包含官方版本跟封装版本）

官方版本

封装版本（通过angular服务进行封装）

angular版本不同 $http的不同写法