AngularJS入門教程之 XMLHttpRequest實(shí)例講解
AngularJS XMLHttpRequest
$http 是 AngularJS 中的一個(gè)核心服務(wù)，用于讀取遠(yuǎn)程服務(wù)器的數(shù)據(jù)。
讀取 JSON 文件
以下是存儲(chǔ)在web服務(wù)器上的 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 是一個(gè)用于讀取web服務(wù)器上數(shù)據(jù)的服務(wù)。
$http.get(url) 是用于讀取服務(wù)器數(shù)據(jù)的函數(shù)。
AngularJS 實(shí)例
<!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>
運(yùn)行結(jié)果：
- 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
應(yīng)用解析:
注意：以上代碼的 get 請(qǐng)求是本站的服務(wù)器，你不能直接拷貝到你本地運(yùn)行，會(huì)存在跨域問題，解決辦法就是將
Customers_JSON.php 的數(shù)據(jù)拷貝到你自己的服務(wù)器上，附：PHP Ajax 跨域問題最佳解決方案。
AngularJS 應(yīng)用通過 ng-app 定義。應(yīng)用在 <div> 中執(zhí)行。
ng-controller 指令設(shè)置了 controller 對(duì)象 名。
函數(shù) customersController 是一個(gè)標(biāo)準(zhǔn)的 JavaScript 對(duì)象構(gòu)造器。
控制器對(duì)象有一個(gè)屬性: $scope.names。
$http.get() 從web服務(wù)器上讀取靜態(tài) JSON 數(shù)據(jù)。
服務(wù)器數(shù)據(jù)文件為： http://www.runoob.com/try/angularjs/data/Customers_JSON.php。
當(dāng)從服務(wù)端載入 JSON 數(shù)據(jù)時(shí)，$scope.names 變?yōu)橐粋€(gè)數(shù)組。
注意：以上代碼也可以用于讀取數(shù)據(jù)庫數(shù)據(jù)。
以上就是對(duì)AngularJS XMLHttpRequest資料的整理，后續(xù)繼續(xù)補(bǔ)充，希望能幫助有需要的朋友。
- javascript XMLHttpRequest對(duì)象全面剖析
- js判斷IE6/IE7/FF的代碼[XMLHttpRequest]
- Javascript+XMLHttpRequest+asp.net無刷新讀取數(shù)據(jù)庫數(shù)據(jù)
- javascript創(chuàng)建createXmlHttpRequest對(duì)象示例代碼
- 深入講解xhr（XMLHttpRequest）/jsonp請(qǐng)求之a(chǎn)bort
- javascript對(duì)XMLHttpRequest異步請(qǐng)求的面向?qū)ο蠓庋b
- JSP XMLHttpRequest動(dòng)態(tài)無刷新及其中文亂碼處理
- JavaScript下通過的XMLHttpRequest發(fā)送請(qǐng)求的代碼
- javascript一個(gè)無懈可擊的實(shí)例化XMLHttpRequest的方法
- [js]輕便的XMLHttpRequest應(yīng)用函數(shù)：downloadUrl()
- JS XMLHttpRequest原理與使用方法深入詳解
相關(guān)文章
詳解基于Angular4+ server render(服務(wù)端渲染)開發(fā)教程
本篇文章主要介紹了詳解基于Angular4+ server render(服務(wù)端渲染)開發(fā)教程 ，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
angularJS自定義directive之帶參方法傳遞詳解
今天小編就為大家分享一篇angularJS自定義directive之帶參方法傳遞詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要為大家詳細(xì)介紹了Angularjs總體介紹及數(shù)據(jù)綁定部分內(nèi)容，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
AngularJS中一般函數(shù)參數(shù)傳遞用法分析
這篇文章主要介紹了AngularJS中一般函數(shù)參數(shù)傳遞用法,結(jié)合實(shí)例形式分析了模型參數(shù)與普通參數(shù)的具體功能與使用技巧,需要的朋友可以參考下2016-11-11
Angular.js項(xiàng)目中使用gulp實(shí)現(xiàn)自動(dòng)化構(gòu)建以及壓縮打包詳解
基于流的前端自動(dòng)化構(gòu)建工具，利用gulp可以提高前端開發(fā)效率，特別是在前后端分離的項(xiàng)目中。下面這篇文章主要給大家介紹了關(guān)于在Angular.js項(xiàng)目中使用gulp實(shí)現(xiàn)自動(dòng)化構(gòu)建以及壓縮打包的相關(guān)資料，需要的朋友可以參考下。2017-07-07
AngularJs是一個(gè)不錯(cuò)的用于開發(fā)SPA應(yīng)用（單頁Web應(yīng)用）的框架。通過本文給大家介紹angularjs基礎(chǔ)教程，需要的朋友要求學(xué)習(xí)吧2016-04-04
AngularJS獲取json數(shù)據(jù)的方法詳解
這篇文章主要介紹了AngularJS獲取json數(shù)據(jù)的方法,結(jié)合實(shí)例形式詳細(xì)分析了AngularJS獲取json數(shù)據(jù)的詳細(xì)步驟、操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-05-05
AngularJS實(shí)現(xiàn)ajax請(qǐng)求的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)ajax請(qǐng)求的方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(xiàn)ajax請(qǐng)求的前端界面、ajax交互及后臺(tái)php處理技巧,需要的朋友可以參考下2016-11-11
AngularJs的UI組件ui-Bootstrap之Tooltip和Popover
這篇文章主要介紹了AngularJs的UI組件ui-Bootstrap之Tooltip和Popover，tooltip和popover是輕量的、可擴(kuò)展的、用于提示的指令。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
動(dòng)手寫一個(gè)angular版本的Message組件的方法
本篇文章主要介紹了動(dòng)手寫一個(gè)angular版本的Message組件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12