angularjs与服务端交互

一、angularjs与服务端交互 :AJAX，$http，Restangular，$resource.
传统的AJAX：
1.先创建XML对象
2.向服务器发送请求，要使用XMLHttpRequest对象的open()和send()方法
3.xmlhttp.open(‘method’,”url’,async); //async为true是异步，为false是同步
4.xmlhttp.send(string); //string仅用于POST请求，GET请求时将参数加在url后

注：GET和POST区别：
GET更简单，更快，在以下情况下使用POST请求：
1.无法使用缓存文件（更新服务器上的文件或数据库）；
2.像服务器发送大量数据（POST没有数据量限制）；
3.发送包含未知字符的用户输入时，POST比GET更稳定也更可靠。

================================================================
Restangular：
功能：向后台发起请求，传输参数，接收返回数据。
首先要进行初始化：
//Restangular基本配置
var restConfig = Restangular.withConfig(function(RestangularConfigurer) {
RestangularConfigurer.setFullResponse(true);
});
//在使用时，先声明一个对象，这是数据发送通用的
var params=new Object();
//对params的属性赋值
params.appId = $scope.appId;
//发送请求：包括url、请求方式、请求成功后执行的方法、失败后执行的方法
restConfig.all('app/searchList.do').post(params).then(function(resp){
var datas = resp.data.list;
$scope.gridOptions.data = datas;
},function error(erro){
console.error(erro);
)};


==============================================================
$http：

快捷方式交互的格式：
$http.请求类型(url,[data],[config]) //请求类型：POST GET DELETE PUT和HEAD这六种
.success(data,status,headers,config) //成功后的操作
.error(data,status,headers,config) //错误时的操作

注：
data：POST和PUT类型请求可以通过可选参数data来发送数据；
发送请求后，data参数表示返回体；
status表示请求后返回的状态码；
headers表示请求后返回的头函数；
config是一个对象，通过该对象， 可以获取发送HTTP请求时完整的配置信息。

例：
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$http){
$http.get('http://www.runoob.com')//这里是多其他域访问，如果是本程序所在服务器可以省略 DNS（域名系统）如："/api/users"
.success(function(response){$scope.names=response.sites;});
.error(function(response){$scope.countrys=response.countrys});
});

配置对象方式的格式：
$http({
method: //传参方法
url://向服务器请求的地址
data://一个对象，作为消息体的一部分发送给服务端，常用于put和post请求
params://一个字符串或者对象，如果是对象，将自动按json格式进行序列化，追加到url后面作为发送数据的一部分
transformRequest://对请求体头信息和请求体进行序列化的转换
ransformResponse://对响应体头信息和响应体进行反序列化转换
cache://是否需要缓存（bool）
timeout://是否延迟发送
})

例：
$scope.click=function(){
$http({
method:'GET',
url:''data/chk.php',
params:{
n:$scope.num
}
}).success(function(data,status,headers,config){
$scope.result=data;})
}

注：
$http({
配置对象
})
.success(fn1)
.error(fn2)
等价于：success和error方法只是接收解析并处理后的响应对象，then方法获取的返回对象更原始和完整
$http({
//配置对象
})
.then(fn1,fn2)

================================================================
$resource服务：

1.需要在页面中先通过
2.在应用的模型中进行注入；
3.直接调用$resource服务：var obj=$resource(url,[paramDefaults],[actions]);
其中：
url：表示请求的服务器地址，可以添加占位符变量，需以“：”为前缀，如：var obj=$resource(‘url?action=:act’);
paramDefaults：是一个对象，设置请求时参数的默认值，如遇到占位符变量自动替换，如：var obj=$resource(“url?action=:act”,{act:’save’,a:’1’,b:’2’}); 发送请求后，实际请求地址为”url?action=save&a=1&b=2”。
action：是一个对象，可以扩展默认资源动作，如：var obj=$resource(‘url?action=:act’,{定义请求的默认值}，{a:{method：”get”}});这样就可以在$resource对象直接调用在可选项参数actions中自定义的方法a，即obj.$a()。

$resource服务包含了5种API：两个GET类型（get、query），三个非GET类型（save、delete\remove）。
1）get类型/query类型：var obj=$resource(‘url’); obj.get(params，successFn，errorFn)；
params参数是一个对象，用于添加随请求一起发送的数据，get和query的最大区别：get获取的是单个元素，返回的是一个对象，query获取的是一组元素，返回的是一个数组。
2）save类型/delete类型/remove类型：var obj=$resource(‘url’); obj.save(‘params.postData,successFn,errorFn’);
params参数发送的数据会添加在url后；
postData参数，以非GET方式，向服务端发送的数据体，是一个对象；
其中，save方法在服务端保存数据时使用，delete和remove方法都是在删除服务端数据时使用，但remove方法可以解决IE浏览器中delete是js保留字而导致的错误问题。