AngularJS XMLHttpRequest

AngularJS XMLHttpRequest

---

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

使用格式：

// 简单的 GET 请求，可以改为 POST
$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});

简写方法

POST 与 GET 简写方法格式：

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

sites.php:

{

"sites": [

{ "Name": "菜鸟教程", "Url": "www.runoob.com", "Country": "CN" },

{ "Name": "Google", "Url": "www.google.com", "Country": "USA" },

{ "Name": "Facebook", "Url": "www.facebook.com", "Country": "USA" },

{ "Name": "微博", "Url": "www.weibo.com", "Country": "CN" }

]}

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

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

</div>

var app = angular.module('myApp', []);

app.controller('siteCtrl', function($scope, $http) {

$http({

method: 'GET',

url: 'sites.php'

}).then(function successCallback(response) {

$scope.names = response.data.sites;

}, function errorCallback(response) {

// 请求失败执行代码 });

});

简写方法

AngularJS1.5 以上版本

var app = angular.module('myApp', []);

app.controller('siteCtrl', function($scope, $http) {

$http.get("sites.php")

.then(function (response) {$scope.names = response.data.sites;});

});

AngularJS1.5 以下版本

var app = angular.module('myApp', []);

app.controller('siteCtrl', function($scope, $http) {

$http.get("sites.php")

.success(function (response) {$scope.names = response.sites;});

});

v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。

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

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

PHP Ajax 跨域问题解决方案

本次通过设置Access-Control-Allow-Origin来实现跨域。

1、允许单个域名访问

指定某域名（http://client.runoob.com）跨域访问，则只需在http://server.runoob.com/server.php文件头部添加如下代码：

header('Access-Control-Allow-Origin:http://client.runoob.com');

2、允许多个域名访问

指定多个域名（http://client1.runoob.com、http://client2.runoob.com等）跨域访问，则只需在http://server.runoob.com/server.php文件头部添加如下代码：

$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';  
$allow_origin = array(  
    'http://client1.runoob.com',  
    'http://client2.runoob.com'  
);   
if(in_array($origin, $allow_origin)){  
    header('Access-Control-Allow-Origin:'.$origin);       
} 

3、允许所有域名访问

允许所有域名访问则只需在http://server.runoob.com/server.php文件头部添加如下代码：

header('Access-Control-Allow-Origin:*');

PHP允许AJAX跨域请求的两种方法

一. 服务端设置 header 头允许AJAX跨域

// 允许 ityangs.net 发起的跨域请求
header("Access-Control-Allow-Origin: ityangs.net"); 

//如果需要设置允许所有域名发起的跨域请求，可以使用通配符 *
header("Access-Control-Allow-Origin: *");

二. 允许jsonp跨域

有些网站处于安全考虑, 不会设置允许跨域, 而我们又刚好会用到一次跨域请求, 那么, jsonp就派上用场了:

<?php
// 设定js定义的方法 (如: js的 users() 方法)
$jsonp = 'users';

// 需要获取的数据
$data = array('id'=>1, 'name'=>'ityangs');

// 转换为json
$dataToJson = json_encode($data);

// 输出

echo $jsonp.'('.$dataToJson.')';

输出结果

users ({

'id': 1, 

'name': 'ityangs'

})

定义一个json函数:

<script type="text/javascript">

function users(res){

var id= res.id;  

var name = res.name

}

</script>