一、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:
功能:向后台发起请求,传输参数,接收返回数据。
首先要进行初始化:
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); )};//Restangular基本配置
==============================================================
$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请求时完整的配置信息。
例:
app.controller('myCtrl',function($scope,$http){ $http.get('')//这里是多其他域访问,如果是本程序所在服务器可以省略 DNS(域名系统)如:"/api/users" .success(function(response){$scope.names=response.sites;}); .error(function(response){$scope.countrys=response.countrys}); });var app=angular.module('myApp',[]);
配置对象方式的格式:
method: //传参方法 url://向服务器请求的地址 data://一个对象,作为消息体的一部分发送给服务端,常用于put和post请求 params://一个字符串或者对象,如果是对象,将自动按json格式进行序列化,追加到url后面作为发送数据的一部分 transformRequest://对请求体头信息和请求体进行序列化的转换 ransformResponse://对响应体头信息和响应体进行反序列化转换 cache://是否需要缓存(bool) timeout://是否延迟发送 })$http({
例:
$http({ method:'GET', url:''data/chk.php', params:{ n:$scope.num } }).success(function(data,status,headers,config){ $scope.result=data;}) }$scope.click=function(){
注:
$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保留字而导致的错误问题。