Angular——$http

基本介绍

$http用于向服务端发起异步请求，同时还支持多种快捷方式如$http.get()、$http.post()、$http.jsonp。$hhtp也是属于内置服务的一种，这里特意提出来写一篇用法。

基本使用

传递的数据可以是'key=val&key=val'形式，这种形式叫formData，在请求头设置成 'Content-Type': 'application/x-www-form-urlencoded' ，那么只有采用这样的方式进行传递

<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul ng-controller="DemoController">
</ul>
<script src="../libs/angular.min.js"></script>
<script>
    var App = angular.module('App', []);
    App.controller('DemoController', ['$scope', '$http', function ($scope, $http) {
        $http({
            url: '01.php',
            method: 'post',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            //get
            params: {
                name: 'itcast',
                sex: '男'
            },
            //post
            // data: 'age=10'
            data: { // post 传参
                age: 10
            }
        }).success(function (info) {
            console.log(info);
        });
    }]);
</script>
</body>
</html>

get方式

<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul ng-controller="DemoController">
</ul>
<script src="../libs/angular.min.js"></script>
<script>
    var App = angular.module('App', []);
    App.controller('DemoController', ['$scope', '$http', function ($scope, $http) {
        $http({
            url: '02.php',
            method: 'get',
            params: {
                name: 'wqx'
            }
        }).success(function (info) {
            console.log(info);
        });
    }]);
</script>
</body>
</html>

post方式

<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul ng-controller="DemoController">
</ul>
<script src="../libs/angular.min.js"></script>
<script>
    var App = angular.module('App', []);
    App.controller('DemoController', ['$scope', '$http', function ($scope, $http) {
        $http({
            url: '03.php',
            method: 'post',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            data: 'age=19'
        }).success(function (info) {
            console.log(info);
        });
    }]);
</script>
</body>
</html>

jsonp方式

（1）跨域的数据传递的数据类型是json，而json是不同平台传递数据的首选，十分方便，下面请求的后台，后台回传的是一个json字符串

（2）jsonp与ajax请求其实没有多大的关系，因为其内部实现的机制还是src属性的请求方式，这是一个get请求，其实现过程如下：

1、如果请求是JSONP，那么它的实现过程还是还原到原始的src的方式进行跨域访问
2、首先是创建一个script标签
3、添加其src属性，填写后台地址
4、将script标签添加到head标签中
5、当script标签的onload事件触发会立刻删除其标签，所以我们是看不见的

<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul ng-controller="DemoController">
</ul>
<script src="../libs/angular.min.js"></script>
<script>
    var App = angular.module('App', []);
    App.controller('DemoController', ['$scope', '$http', function ($scope, $http) {
        $http({
            url: '04.php?callback=JSON_CALLBACK',
            method: 'jsonp'
        }).success(function (info) {
            console.log(info);
        });
    }]);
</script>
</body>
</html>

参数callback是约定俗成的，而值JSON_CALLBACK是angular特有的，在这里的作用相当于占位符，真正传递的时候会发生改变