AngularJS XMLHttpRequest

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

读取 JSON 文件

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

http://www.xxx.com/try/angularjs/data/Customers_JSON.php

1. { 
2. "records": 
3. [ 
4. { 
5. "Name" : "Alfreds Futterkiste", 
6. "City" : "Berlin", 
7. "Country" : "Germany" 
8. }, 
9. { 
10. "Name" : "Berglunds snabbköp", 
11. "City" : "Luleå", 
12. "Country" : "Sweden" 
13. }, 
14. { 
15. "Name" : "Centro comercial Moctezuma", 
16. "City" : "México D.F.", 
17. "Country" : "Mexico" 
18. }, 
19. { 
20. "Name" : "Ernst Handel", 
21. "City" : "Graz", 
22. "Country" : "Austria" 
23. }, 
24. { 
25. "Name" : "FISSA Fabrica Inter. Salchichas S.A.", 
26. "City" : "Madrid", 
27. "Country" : "Spain" 
28. }, 
29. { 
30. "Name" : "Galería del gastrónomo", 
31. "City" : "Barcelona", 
32. "Country" : "Spain" 
33. }, 
34. { 
35. "Name" : "Island Trading", 
36. "City" : "Cowes", 
37. "Country" : "UK" 
38. }, 
39. { 
40. "Name" : "Königlich Essen", 
41. "City" : "Brandenburg", 
42. "Country" : "Germany" 
43. }, 
44. { 
45. "Name" : "Laughing Bacchus Wine Cellars", 
46. "City" : "Vancouver", 
47. "Country" : "Canada" 
48. }, 
49. { 
50. "Name" : "Magazzini Alimentari Riuniti", 
51. "City" : "Bergamo", 
52. "Country" : "Italy" 
53. }, 
54. { 
55. "Name" : "North/South", 
56. "City" : "London", 
57. "Country" : "UK" 
58. }, 
59. { 
60. "Name" : "Paris spécialités", 
61. "City" : "Paris", 
62. "Country" : "France" 
63. }, 
64. { 
65. "Name" : "Rattlesnake Canyon Grocery", 
66. "City" : "Albuquerque", 
67. "Country" : "USA" 
68. }, 
69. { 
70. "Name" : "Simons bistro", 
71. "City" : "København", 
72. "Country" : "Denmark" 
73. }, 
74. { 
75. "Name" : "The Big Cheese", 
76. "City" : "Portland", 
77. "Country" : "USA" 
78. }, 
79. { 
80. "Name" : "Vaffeljernet", 
81. "City" : "Århus", 
82. "Country" : "Denmark" 
83. }, 
84. { 
85. "Name" : "Wolski Zajazd", 
86. "City" : "Warszawa", 
87. "Country" : "Poland" 
88. } 
89. ] 
90. } 

AngularJS $http

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

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

1. <div ng-app="myApp" ng-controller="customersCtrl">  
2.  
3. <ul> 
4.   <li ng-repeat="x in names"> 
5.     {{ x.Name + ', ' + x.Country }} 
6.   </li> 
7. </ul> 
8.  
9. </div> 
10.  
11. <script> 
12. var app = angular.module('myApp', []); 
13. app.controller('customersCtrl', function($scope, $http) { 
14.     $http.get("http://www.xxx.com/try/angularjs/data/Customers_JSON.php") 
15.     .success(function(response) {$scope.names = response.records;}); 
16. }); 
17. </script> 

应用解析:

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

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

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

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

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

$http.get() 从web服务器上读取静态 JSON 数据。
当从服务端载入 JSON 数据时，$scope.names 变为一个数组。