AngularJS入门教程之 XMLHttpRequest实例讲解

更新时间：2016年07月27日 16:18:46 投稿：lqh

本文主要讲解 AngularJS XMLHttpRequest,这里给大家整理相关资料并提供实例代码,有需要的小伙伴参考下

AngularJS XMLHttpRequest

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

读取 JSON 文件

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

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

{
"records":
[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "Königlich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]
}

AngularJS $http

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

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

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

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

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
 $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
 .success(function (response) {$scope.names = response.records;});
});
</script>

</body>
</html>

运行结果：

Alfreds Futterkiste, Germany
Ana Trujillo Emparedados y helados, Mexico
Antonio Moreno Taquería, Mexico
Around the Horn, UK
B's Beverages, UK
Berglunds snabbköp, Sweden
Blauer See Delikatessen, Germany
Blondel père et fils, France
Bólido Comidas preparadas, Spain
Bon app', France
Bottom-Dollar Marketse, Canada
Cactus Comidas para llevar, Argentina
Centro comercial Moctezuma, Mexico
Chop-suey Chinese, Switzerland
Comércio Mineiro, Brazil

应用解析:

注意：以上代码的 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/Customers_JSON.php。

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

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

以上就是对AngularJS XMLHttpRequest资料的整理，后续继续补充，希望能帮助有需要的朋友。

您可能感兴趣的文章:

详解基于Angular4+ server render(服务端渲染)开发教程
本篇文章主要介绍了详解基于Angular4+ server render(服务端渲染)开发教程，具有一定的参考价值，有兴趣的可以了解一下
2017-08-08
angularJS自定义directive之带参方法传递详解
今天小编就为大家分享一篇angularJS自定义directive之带参方法传递详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-10-10
AngularJs每天学习之总体介绍
这篇文章主要为大家详细介绍了Angularjs总体介绍及数据绑定部分内容，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
AngularJS中一般函数参数传递用法分析
这篇文章主要介绍了AngularJS中一般函数参数传递用法,结合实例形式分析了模型参数与普通参数的具体功能与使用技巧,需要的朋友可以参考下
2016-11-11
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
基于流的前端自动化构建工具，利用gulp可以提高前端开发效率，特别是在前后端分离的项目中。下面这篇文章主要给大家介绍了关于在Angular.js项目中使用gulp实现自动化构建以及压缩打包的相关资料，需要的朋友可以参考下。
2017-07-07
AngularJs 60分钟入门基础教程
AngularJs是一个不错的用于开发SPA应用（单页Web应用）的框架。通过本文给大家介绍angularjs基础教程，需要的朋友要求学习吧
2016-04-04
AngularJS获取json数据的方法详解
这篇文章主要介绍了AngularJS获取json数据的方法,结合实例形式详细分析了AngularJS获取json数据的详细步骤、操作技巧与相关注意事项,需要的朋友可以参考下
2017-05-05
AngularJS实现ajax请求的方法
这篇文章主要介绍了AngularJS实现ajax请求的方法,结合实例形式分析了AngularJS实现ajax请求的前端界面、ajax交互及后台php处理技巧,需要的朋友可以参考下
2016-11-11
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
这篇文章主要介绍了AngularJs的UI组件ui-Bootstrap之Tooltip和Popover，tooltip和popover是轻量的、可扩展的、用于提示的指令。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-07-07
动手写一个angular版本的Message组件的方法
本篇文章主要介绍了动手写一个angular版本的Message组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12