angularjs中的$http详解
来源:互联网 发布:问卷星数据分析 编辑:程序博客网 时间:2024/06/05 17:55
语法:要将区别先弄清$http服务,它是对原生XMLHttpRequest对象的简单封装,是只能接受一个参数的方法,这个方法会返回一个promise对象,具有sccess和error两个方法。当然,我们也可以在响应返回时用then方法来处理,会得到一个特殊的参数,代表了对象的成功或失败信息,或者可以使用success和error回调代替。 $http().then(function success(resp){//响应成功时调用,resp是一个响应对象},function error(resp){// 响应失败时调用,resp带有错误信息});可以使用then()函数来处理$http服务的回调then()函数接收的resp(响应对象)包含5个属性: 1. data(字符串或对象):响应体,就是后台返回的数据2. status:相应http的状态码,如2003. headers(函数):头信息的getter函数,可以接受一个参数,用来获取对应名字的值4. config(对象):生成原始请求的完整设置对象5. statusText:相应的http状态文本,如"ok" $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){ //错误处理});then写法与success参数是等价的,then方法和success方法的主要区别就是,then方法会接受到完整的响应对象,而success则会对响应对象进行析构。AngularJS中的简单请求 --- $http --- 一个类似jquery的$.ajax的对象,用于异步请求 语法:$http服务的设置对象:当我们把$http当成函数来使用时即$http(),需要传入一个对象,这个对象可以包含以下键1、method 字符串 表示发送的请求类型 get post jsonp等等2、url 字符串 绝对或者相对的URL,请求的目标3、params 字符串或对象 会被转化成查询字符串加到URL后面,如果不是字符串会被JSON序列化4、data 字符串或者对象 这个对象包含了被当做消息体发送给服务器的数据,一般在POST请求中使用,并且从angular1.3开始可以在POST请求里发送二进制数据 如var blob = new Blob({name:’张三’}); $http({method:’get’,url:’/‘,data:blob});5、headers 对象 在我们做POST跨域和后台配合的时候就用到了headers,其代表随请求发送的HTTP头字符串6、xsrfHeaderName 字符串 保存XSFR令牌的HTTP头的名称7、xsrfCookieName 字符串 保存XSFR令牌的cookie的名称8、transformRequest 函数或函数组 用来对HTTP请求头和体信息进行转换,并返回转化后的版本,通常用于在请求发送给服务器之前对其序列化9、transformResponse 函数或函数组 用来HTTP响应头和响应体信息进行转换,并返回转化后的版本,通常用来反序列化10、cache 布尔或缓存对象 如果设置为true angularjs会用默认的$http缓存对GET请求进行缓存11、timout 数值或者promise对象,如果为数值那么请求会在指定的毫秒后结束(会跳到失败的error方法里) ,如果为对象那么promise对象在被resolve时请求会被中止,方法执行完毕再执行请求12、responseType 字符串 该选项会在请求中设置XMLHttpResponseType属性有以下类型: “”字符串默认,”arraybuffer”(arraybuffer),”blob”(blob对象),“document”(HTTP文档),”json“(从JSON对象解析出来的json字符串),”text“(字符串),”moz-blob“(Firefox的接收进度事件),”moz-chunked-text“(文本流),”moz-chunked-arraybuffer”(arraybuffer流)$http服务的快捷方法$http提供了一些快捷方法让我们使用,一共有六个(其实是六种请求模式)1、$http.get(url字符串,config可选的配置-对象类型) 返回HttpPromise对象2、$http.delete(url字符串,config可选的配置-对象类型) 返回HttpPromise对象3、$http.head(url字符串,config可选的配置-对象类型) 返回HttpPromise对象4、$http.jsonp(url字符串,config可选的配置-对象类型) 返回HttpPromise对象5、$http.post(url字符串,data对象或字符串,config可选的配置-对象类型) 返回HttpPromise对象6、$http.put(url字符串,data对象或字符串,config可选的配置-对象类型) 返回HttpPromise对象 $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");
阅读全文
0 0
- angularjs中的$http详解
- AngularJS中的$http
- AngularJS中的 $http服务
- AngularJS中的$http
- angularJs中的http服务
- AngularJS中的$http深入分析
- Angularjs中的$Http与$resource
- AngularJS中的交互 $http
- 修改AngularJS中的$http cache中的数据
- angularjs指令中的compile详解
- AngularJS中的$http服务请求数据
- angularjs $http
- AngularJS $http
- angularjs $http
- AngularJS http
- AngularJS $http
- AngularJS 中的Promise --- $q服务详解
- AngularJS 中的Promise --- $q服务详解
- shell 基础 (一)
- hdoj 6055(2017 Multi-University Training Contest
- servletFileUploadAndDownload
- 欢迎使用CSDN-markdown编辑器
- derby数据库源码分析(一)--页面分析
- angularjs中的$http详解
- hdu 2089 不要62(数位dp)
- 在Docker下使用Nvidia GPU进行计算
- 2017 Android 面试题
- POJ2774 Long Long Message(后缀数组)
- 单机服务器支持千万级并发长连接的压力测试
- http请求与响应全过程
- XYZZY HDU
- xilinx 高速收发器Serdes深入研究