`

AngularJS XMLHttpRequest

阅读更多

        $http是AngularJS 中的一个核心服务,用于读取远程服务器的数据。
        以下是存储在web服务器上的 JSON 文件data.json。

[
{
"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是一个用于读取web服务器上数据的服务。$http.get(url) 是用于读取服务器数据的函数。

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8"></meta>
		<title>AngularJS XMLHttpRequest</title>
		<script src="angular/angular.js"></script>
	</head>
<body>
	<div ng-app="" ng-controller="customersController">
		<ul>
			<li ng-repeat="x in names">{{ x.Name + ', ' + x.Country }}</li>
		</ul>
	</div>
</body>
<script>
	function customersController($scope,$http) {
  		$http.get("data.json").success(function(response) {$scope.names = response;});
  		//$http.get("http://localhost:8088/angularjs-http/data.json").success(function(response) {$scope.names = response;});
	}
</script>
</html>

应用解析
1.AngularJS 应用通过 ng-app 定义。应用在 <div> 中执行。
2.ng-controller 指令设置了controller 对象名。
3.函数 customersController 是一个标准的 JavaScript 对象构造器。
4.控制器对象有一个属性: $scope.names。
5.$http.get() 从web服务器上读取静态 JSON 数据。
6.当从服务端载入 JSON 数据时,$scope.names 变为一个数组。

运行结果:

工程结构:


文章来源:http://www.w3cschool.cc/angularjs/angularjs-http.html

  • 大小: 46.1 KB
  • 大小: 13.3 KB
分享到:
评论

相关推荐

    AngularJS入门教程之 XMLHttpRequest实例讲解

    AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。 读取 JSON 文件 以下是存储在web服务器上的 JSON 文件: ...

    浅谈angular.js跨域post解决方案

    AngularJS XMLHttpRequest:$http用于读取远程服务器的数据 $http.post(url, data, [config]).success(function(){ ... }); $http.get(url, [config]).success(function(){ ... }); $http.get(url, [config])....

    AngularJS入门教程之服务(Service)

    $http服务极大地简化了前端与后端的交互,使得开发者不需要直接操作XMLHttpRequest对象或者使用第三方的库如jQuery的ajax方法。 $timeout服务提供了与JavaScript原生window.setTimeout功能相似的功能。在AngularJS...

    全面剖析XMLHttpRequest对象

    在实际开发中,为了处理跨浏览器的差异和简化编程,常常会使用库或框架,如jQuery、AngularJS或React,它们提供了更高级别的抽象和封装,以更友好的方式使用XMLHttpRequest。 总的来说,XMLHttpRequest对象是现代...

    AngularJS Handbook_ Easy Web App Development

    #### 三、XHRs (XMLHttpRequest) 在Web开发中,XHRs被广泛用于实现异步通信,即不重新加载整个页面就可以向服务器发送请求并接收响应。AngularJS通过`$http`服务提供了对XHRs的支持。 **常用方法:** - `$...

    全面剖析XMLHttpRequest对象.doc

    ### 全面剖析XMLHttpRequest对象 #### 一、引言 ...随着Web技术的发展,虽然现在有许多高级库和框架(如jQuery、AngularJS等)提供了更高层次的抽象,但掌握XMLHttpRequest的基本原理仍然是非常重要的。

    ProfileImageUpload-AngularJS-源码.rar

    上传文件可以使用Ajax技术,通过XMLHttpRequest或者更高级的Fetch API来实现异步发送请求。一般来说,我们会创建一个HTTP POST请求,将文件数据作为FormData对象的一部分发送到服务器。以下是一个使用$http服务进行...

    CRUD angularJS in vb6_wwwincrud_incrudcomhttps_furjgz_crud_WEBBR

    在VB6端,你需要编写处理HTTP请求的代码,例如使用XMLHttpRequest对象或Winsock控件来接收和响应来自前端的请求。 7. **VB6后端处理**:在VB6中,你需要实现数据访问层,处理从AngularJS发送过来的请求,执行数据库...

    ng-flow AngularJS

    上传功能可能依赖于XHR2(XMLHttpRequest Level 2)或FormData对象来实现。 4. **兼容性**:由于ng-flow是AngularJS的插件,因此它充分利用了AngularJS的数据双向绑定和指令系统。同时,它的跨平台支持意味着它应该...

    ajax,AngularJS,Bootstrap,js,css手册下载

    JavaScript是实现AJAX的核心,它通过XMLHttpRequest对象与服务器进行通信,通常接收或发送JSON格式的数据,而不是XML,因为JSON更轻量级且易于处理。 2. **AngularJS**:AngularJS是Google维护的一个JavaScript框架...

    红旅动漫移动端网站demo,用angularjs、swiper、jquery,模块化开发.zip

    3. AJAX:封装了XMLHttpRequest对象,简化异步数据交互,如$.ajax()和$.get()。 **模块化开发**: 模块化开发是将大型项目分解为独立、可重用的模块,便于代码管理和团队协作。在本项目中,可能采用了模块化组织...

    AngularJS实现与后台服务器进行交互的示例讲解

    AngularJS作为一个非常实用的前端框架,我们知道在AngularJS中有自己的Model和Controler。...$http是angularJS中的一个可信服务,利用浏览器的XMLHTTPRequest核心对象与远程http服务器进行交互。 $ht

    详解AngularJS如何实现跨域请求

    它是一个基于XMLHttpRequest对象(XHR)的HTTP服务,用于与服务器进行异步数据交互。例如,我们可以使用$http.post或$http.get方法发起HTTP请求: ```javascript $http.post(url, data, config).success(function...

    AngularJS在IE下取数据总是缓存问题的解决方法

    在前端开发中,AngularJS是一个非常流行的JavaScript框架,它广泛应用于构建单页面应用。然而,在使用AngularJS开发应用时,尤其是在旧版本的Internet Explorer (IE) 浏览器中,开发者常常会遇到数据取回(特别是GET...

    spa,aceadmin,angualrjs,ajax版

    4. **Ajax**:Asynchronous JavaScript and XML(异步JavaScript和XML),现在通常指的是使用XMLHttpRequest对象进行异步数据交互的技术。在SPA中,Ajax经常用于后台数据的无刷新加载,提升应用的响应速度和用户体验...

    详解angularJS+Ionic移动端图片上传的解决办法

    在现代移动开发中,使用AngularJS结合Ionic框架进行图片上传功能的开发是前端开发人员常见的任务。本文将详细解读AngularJS和Ionic结合使用时实现移动端图片上传的方法和步骤。 首先,了解AngularJS和Ionic的基本...

    体验jQuery和AngularJS的不同点及AngularJS的迷人之处

    4. **Ajax**:封装了原生的XMLHttpRequest对象,提供了一种非常简便的方式来处理Ajax请求。 5. **跨浏览器兼容**:在不同浏览器间提供一致的API,减少开发者处理兼容性问题的工作量。 ### AngularJS的特点和使用...

Global site tag (gtag.js) - Google Analytics