$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 变为一个数组。
运行结果:
工程结构:
相关推荐
AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。 读取 JSON 文件 以下是存储在web服务器上的 JSON 文件: ...
AngularJS XMLHttpRequest:$http用于读取远程服务器的数据 $http.post(url, data, [config]).success(function(){ ... }); $http.get(url, [config]).success(function(){ ... }); $http.get(url, [config])....
$http服务极大地简化了前端与后端的交互,使得开发者不需要直接操作XMLHttpRequest对象或者使用第三方的库如jQuery的ajax方法。 $timeout服务提供了与JavaScript原生window.setTimeout功能相似的功能。在AngularJS...
在实际开发中,为了处理跨浏览器的差异和简化编程,常常会使用库或框架,如jQuery、AngularJS或React,它们提供了更高级别的抽象和封装,以更友好的方式使用XMLHttpRequest。 总的来说,XMLHttpRequest对象是现代...
#### 三、XHRs (XMLHttpRequest) 在Web开发中,XHRs被广泛用于实现异步通信,即不重新加载整个页面就可以向服务器发送请求并接收响应。AngularJS通过`$http`服务提供了对XHRs的支持。 **常用方法:** - `$...
### 全面剖析XMLHttpRequest对象 #### 一、引言 ...随着Web技术的发展,虽然现在有许多高级库和框架(如jQuery、AngularJS等)提供了更高层次的抽象,但掌握XMLHttpRequest的基本原理仍然是非常重要的。
上传文件可以使用Ajax技术,通过XMLHttpRequest或者更高级的Fetch API来实现异步发送请求。一般来说,我们会创建一个HTTP POST请求,将文件数据作为FormData对象的一部分发送到服务器。以下是一个使用$http服务进行...
在VB6端,你需要编写处理HTTP请求的代码,例如使用XMLHttpRequest对象或Winsock控件来接收和响应来自前端的请求。 7. **VB6后端处理**:在VB6中,你需要实现数据访问层,处理从AngularJS发送过来的请求,执行数据库...
上传功能可能依赖于XHR2(XMLHttpRequest Level 2)或FormData对象来实现。 4. **兼容性**:由于ng-flow是AngularJS的插件,因此它充分利用了AngularJS的数据双向绑定和指令系统。同时,它的跨平台支持意味着它应该...
JavaScript是实现AJAX的核心,它通过XMLHttpRequest对象与服务器进行通信,通常接收或发送JSON格式的数据,而不是XML,因为JSON更轻量级且易于处理。 2. **AngularJS**:AngularJS是Google维护的一个JavaScript框架...
3. AJAX:封装了XMLHttpRequest对象,简化异步数据交互,如$.ajax()和$.get()。 **模块化开发**: 模块化开发是将大型项目分解为独立、可重用的模块,便于代码管理和团队协作。在本项目中,可能采用了模块化组织...
AngularJS作为一个非常实用的前端框架,我们知道在AngularJS中有自己的Model和Controler。...$http是angularJS中的一个可信服务,利用浏览器的XMLHTTPRequest核心对象与远程http服务器进行交互。 $ht
它是一个基于XMLHttpRequest对象(XHR)的HTTP服务,用于与服务器进行异步数据交互。例如,我们可以使用$http.post或$http.get方法发起HTTP请求: ```javascript $http.post(url, data, config).success(function...
在前端开发中,AngularJS是一个非常流行的JavaScript框架,它广泛应用于构建单页面应用。然而,在使用AngularJS开发应用时,尤其是在旧版本的Internet Explorer (IE) 浏览器中,开发者常常会遇到数据取回(特别是GET...
4. **Ajax**:Asynchronous JavaScript and XML(异步JavaScript和XML),现在通常指的是使用XMLHttpRequest对象进行异步数据交互的技术。在SPA中,Ajax经常用于后台数据的无刷新加载,提升应用的响应速度和用户体验...
在现代移动开发中,使用AngularJS结合Ionic框架进行图片上传功能的开发是前端开发人员常见的任务。本文将详细解读AngularJS和Ionic结合使用时实现移动端图片上传的方法和步骤。 首先,了解AngularJS和Ionic的基本...
4. **Ajax**:封装了原生的XMLHttpRequest对象,提供了一种非常简便的方式来处理Ajax请求。 5. **跨浏览器兼容**:在不同浏览器间提供一致的API,减少开发者处理兼容性问题的工作量。 ### AngularJS的特点和使用...