您的位置:首页 > 理论基础 > 计算机网络

AngularJS中的$http深入分析

2016-01-25 11:30 716 查看
AngularJS中的简单请求  ---  $http   --- 一个类似jquery的$.ajax的对象,用于异步请求
语法:
$http({
url:url,           //请求的url路径
method:method,    //GET/DELETE/HEAD/JSONP/POST/PUT
params:params ,   //转为  ?param1=xx1¶m2=xx2的形式
data: data        //包含了将被当做消息体发送给服务器的数据,通常在POST请求时使用
}
}).success(function(response, status, header, config, statusText){
//成功处理
}).error(function(data,header,config,status){
//错误处理
});

特别注意:
1.请求参数说明:
url:url,           //请求的url路径
method:method,    //GET/DELETE/HEAD/JSONP/POST/PUT
params:params ,   //转为  ?param1=xx1¶m2=xx2的形式
data: data        //包含了将被当做消息体发送给服务器的数据,通常在POST请求时使用

2.响应参数说明:
response     ---  响应体,即:要请求的数据
status       ---  HTTP状态码
header      ---  头信息
config       ---  用来生成原始请求的完整设置对象
statusText   ---  相应的HTTP状态文本

3.缓存HTTP请求
默认情况下,$http服务不会对请求进行本地缓存。在发送单独请求时,可通过向$http请求传递一个布尔参数来启用缓存
eg:
$http.get({'/api/users.json',{cache:true}})
.success(function(data){   })
.error(function(data){   })
解析:
第一次发送请求时,$http服务会向 /api/users.json发送一个GET请求,
第二次发送同一个GET请求时,$http服务会从缓存中取回请求的结果,而不会真的发送一个HTTP GET请求
设置启动缓存后,AngularJS默认会使用 $cacheFactory,这个服务在AngularJS启动时自动创建
如果想要对AngularJS使用的缓存进行更多的自定义控制,可以向请求传入一个自定义的缓存实例代替true。

1.GET方式   --- params参数会转为  ?param1=xx1¶m2=xx2的形式
1.$http请求:
$http({
url:"/api/users.json",
method:'GET',
params:{
'username':'jay'
}
}
}).success(function (response, status, headers, config) {
/*response   -- 成功返回的数据
status     -- 状态码
headers    -- 头信息
config     -- 其他信息
*/
}).error(function (response) {

}
});
2.快捷请求:
$http.get(url, [config])
.success(function(data){})
.error(function(data){});

2.POST方式
$http({method : 'POST',params : { id:123}, data:{name:'john',age:27}, url : "/mypath"})
.success(function(response, status, headers, config){
//do anything what you want;
})
.error(function(response, status, headers, config){
//do  anything what you want;
});

2.快捷方式:
$http.post(url,  $scope.formData).success(function (response, status, headers, config) {
......
}).error(function (response) {
......
});

3.$http提交表单  --- 与Spring MVC交互, 使用这种方式

通用方式:
$http({
method: "POST",
url: url,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: $.param($scope.formData)
}).success(function(result){

}).error(function(result){
});

快捷方式:
$http.post(url, $scope.formData)
.success(function(result){
})
.error(function(result){
});

eg:
var data = {
"server":$scope.server,
"time":$("#time").val(),
"day":day
}

$http({
method: "post",
url: ctx+'/player/lossPlayer/list.htm',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: $.param(data)
}).success(function(result){
if(result.tip!=undefined){
//当前绑定的数据清空
$scope.players = [];
alert(result.tip);
}else{
console.log(result.json);
$scope.players = $.parseJSON($.parseJSON(result.json).players);
}
});

4.使用$http指定的方法发送HTTP请求:
get(url, [config]);
delete(url, [config]);
post(url, data, [config]);
put(url, data, [config]);

5.发送jsonp请求:
为了发送JSONP请求,url中必须包含JSON_CALLBACK参数, jsonp(url,config) 其中config是可选的
eg:
var promise=$http.jsonp("/api/users.json?callback=JSON_CALLBACK");
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: