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资料的整理，后续继续补充，希望能帮助有需要的朋友。
您可能感兴趣的文章:
- javascript XMLHttpRequest对象全面剖析
- js判断IE6/IE7/FF的代码[XMLHttpRequest]
- Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
- javascript创建createXmlHttpRequest对象示例代码
- 深入讲解xhr（XMLHttpRequest）/jsonp请求之abort
- javascript对XMLHttpRequest异步请求的面向对象封装
- JSP XMLHttpRequest动态无刷新及其中文乱码处理
- JavaScript下通过的XMLHttpRequest发送请求的代码
- javascript一个无懈可击的实例化XMLHttpRequest的方法
- [js]轻便的XMLHttpRequest应用函数：downloadUrl()
- JS XMLHttpRequest原理与使用方法深入详解
相关文章
这篇文章主要为大家详细介绍了Angular实现表单验证功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了AngularJS入门知识之MVW类框架的编程思想探讨,本文通过实现两个简单的业务需求,探讨AngularJS和传统的JavaScript控制DOM实现方式的差别,并尝试理解 MVW此类框架在流行的Web前端开发中的编程思想,需要的朋友可以参考下2014-12-12
这篇文章给大家介绍了利用AngularJs如何实现ng-repeat内各个小的子作用域单独数据绑定。有需要的小伙伴们可以参考借鉴，下面来一起看看吧。2016-09-09
这篇文章主要给大家介绍了关于Angular4学习教程之HTML属性绑定的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
本文主要介绍AngularJS环境设置,学习AngularJS的朋友肯定要设置开发软件的环境,这里详细介绍安装设置流程，有需要的朋友可以参考下2016-08-08
这篇文章主要介绍了AngularJS中取消对HTML片段转义的方法例子,在一些需要显示HTML的地方,就要取消AngularJS的转义,本文就介绍了这种方法,需要的朋友可以参考下2015-01-01![Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法](//img.jbzj.com/images/xgimg/bcimg6.png)
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
本篇文章主要介绍了Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的区别，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了 AngularJS封装$http.post()实例详解的相关资料,需要的朋友可以参考下2017-05-05
Protractor是一个建立在WebDriverJS基础上的端到端(E2E)的AngularJS JavaScript Web应用程序测试框架，下面这篇文章主要给大家介绍了angular.js自动化测试之protractor的相关资料，需要的朋友可以参考下。2017-07-07
这篇文章主要介绍了在Angular项目使用socket.io实现通信的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
![Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法](http://img.jbzj.com/images/xgimg/bcimg6.png)
最新评论