AngularJS XMLHttpRequest

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

使用格式：

// 简单的 GET 请求，可以改为 POST
$http({
	method: 'GET',
	url: '/someUrl',
        params:{'name':'ari'}//关于参数：用GET的时候就是params，用POST/PUT/PATCH/DELETE就是data；

}).then(function successCallback(response) {//（响应对象）包含5个属性
		// 请求成功执行代码  
              console.log(response.data);//响应数据

                       console.log(response.status);//相应请求状态码

           console.log(response.statusText); //相应的请求状态文本

          var xhr=response.config();//生成原始请求的完整设置对象

                      // 读取X-Auth-ID
                      response.headers('X-Auth-ID');//头信息的getter函数，可以接受一个参数，用来获取对应名字的值

	}, function errorCallback(response) {
		// 请求失败执行代码
});


var blob=new Blob(['Hello world'],{type:'text/plain'});//从AngularJS 1.3开始，它还可以在POST请求里发送二进制数据。要发送一个blob对象，你可以简单地通过使用data参数来传递它。

$http({

  method:'post',//请求方法    get put jsonp header


  url:'post.php',//请求文件的路径

      cache: true,//启用缓存

  data:{name:"aaa",id:"1",age:"20"}//向服务器传递的数据   data:blob


 

 

}).then(function successCallback(response) {//（响应对象）包含5个属性

    console.log(response.data);//响应数据

           console.log(response.status);//相应请求状态码

     console.log(response.statusText); //相应的请求状态文本

     var xhr=response.config();//生成原始请求的完整设置对象

            // 读取X-Auth-ID
           response.headers('X-Auth-ID');//头信息的getter函数，可以接受一个参数，用来获取对应名字的值

 

  }, function errorCallback(response) {

    console.log('失败');

});

 

 

//但是，这时候你可能收不到返回的数据，结果为null，这是因为要转换成form data。

//解决方案(在post中进行相应配置)：

$http({

  method:'post',

  url:'post.php',

  data:{name:"aaa",id:"1",age:"20"},

  headers:{'Content-Type': 'application/x-www-form-urlencoded'},

  transformRequest: function(obj) {

   var str = [];

   for(var p in obj){

    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));

   }

   return str.join("&");

  }

}).then(function successCallback(response) {

    console.log(response);

  }, function errorCallback(response) {

    console.log('失败');

});

 

/*

原理解读：

首先，配置headers是因为，POST提交时，使用的Content-Type是application/x-www-form-urlencoded，

而使用原生AJAX的POST请求如果不指定请求头RequestHeader，默认使用的Content-Type是text/plain;charset=UTF-8，

在html中form的Content-type默认值是Content-type：application/x-www-form-urlencoded，所以要进行相应的配置。

然后，配置transformRequest是因为，如果参数是对象，需要转化一下。

*/

POST 与 GET 简写方法格式：

$http.get({

  'http://10.30.24.12/emp-management/empDetail',

  {params:{"id":3}}

}).then(function successCallback(response) {

    console.log(response.data.name);

  }, function errorCallback(response) {

    console.log('失败');

});

 

$http.post({

  'http://10.30.24.12/emp-management/empDetail',

  {data:{"id":3}}

}).then(function successCallback(response) {

    console.log(response.data.name);

  }, function errorCallback(response) {

    console.log('失败');

});





简写方法

 

此外还有以下简写方法：

• $http.get
• $http.head
• $http.post
• $http.put
• $http.delete
• $http.jsonp
• $http.patch

angulajs中的jsonp

 

$http({

  method: 'JSONP',

  url: 'http://www.b.com/test.php?callback=JSON_CALLBACK',

     {data:{"id":"3"}}

}).success(function(response){

  console.log(response);

});

 //或是这样写

$http.jsonp(

  'http://www.b.com/test.php?callback=JSON_CALLBACK'

).success(function (response){

  console.log(response);

});

//这里要注意，跨域请求的url后一定要追加参数callback，并且callback的值是固定的，即JSON_CALLBACK，尽量不要去做任何改动

 

 

 

---

读取 JSON 文件

以下是存储在web服务器上的 JSON 文件：

http://www.runoob.com/try/angularjs/data/sites.php

{ "sites": [

             { "Name": "菜鸟教程", "Url": "www.runoob.com", "Country": "CN" },

             { "Name": "Google", "Url": "www.google.com", "Country": "USA" },

             { "Name": "Facebook", "Url": "www.facebook.com", "Country": "USA" },

             { "Name": "微博", "Url": "www.weibo.com", "Country": "CN" }

            ]

}

---

AngularJS $http

AngularJS $http 是一个用于读取web服务器上数据的服务。

$http.get(url) 是用于读取服务器数据的函数。

废弃声明 (v1.5)

v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。

 

简写方法实例

AngularJS1.5 以上版本 - 实例

<div ng-app="myApp" ng-controller="siteCtrl">

<ul>

<li ng-repeat="x in names"> {{ x.Name + ', ' + x.Country }} </li>

</ul>

</div>

<script>

     

var app = angular.module('myApp', []);

app.controller('siteCtrl', function($scope, $http) {

         $http({ method: 'GET', url: 'https://www.runoob.com/try/angularjs/data/sites.php' }).then(

                    function successCallback(response) {

                                    $scope.names = response.data.sites;

                    },

                    function errorCallback(response) { // 请求失败执行代码 });

     });

 

</script>

尝试一下 »

AngularJS1.5 以下版本 - 实例

<div ng-app="myApp" ng-controller="siteCtrl">

     <ul>

          <li ng-repeat="x in names"> {{ x.Name + ', ' + x.Country }} </li>

    </ul>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('siteCtrl', function($scope, $http) {

           $http.get("http://www.runoob.com/try/angularjs/data/sites.php",{ cache: true }) .success(function (response) {

              $scope.names = response.sites;});//注意then()与success()时的响应数据的区别   response.data     response

   });

 

</script>

尝试一下 »

应用解析:

注意：以上代码的 get 请求是本站的服务器，你不能直接拷贝到你本地运行，会存在跨域问题，解决办法就是将 Customers_JSON.php 的数据拷贝到你自己的服务器上，附：PHP Ajax 跨域问题最佳解决方案。

AngularJS 应用通过 ng-app 定义。应用在 <div> 中执行。

ng-controller 指令设置了 controller 对象 名。

函数 customersController 是一个标准的 JavaScript 对象构造器。

控制器对象有一个属性: $scope.names。

$http.get() 从web服务器上读取静态 JSON 数据。

服务器数据文件为：  http://www.runoob.com/try/angularjs/data/sites.php。

当从服务端载入 JSON 数据时，$scope.names 变为一个数组。

 

 

	以上代码也可以用于读取数据库数据。