angularjs中的$http详解

1. 语法:
2. 要将区别先弄清$http服务，它是对原生XMLHttpRequest对象的简单封装，是只能接受一个参数的方法，
3. 这个方法会返回一个promise对象，具有sccess和error两个方法。当然，我们也可以在响应返回时用then
4. 方法来处理，会得到一个特殊的参数，代表了对象的成功或失败信息，或者可以使用success和error回调
5. 代替。
6. $http(
7. ).then(function success(resp){
8. //响应成功时调用，resp是一个响应对象
9. },function error(resp){
10. // 响应失败时调用，resp带有错误信息
11. }
12. );
13. 可以使用then()函数来处理$http服务的回调
14. then()函数接收的resp（响应对象）包含5个属性：　
15. 1. data（字符串或对象）：响应体,就是后台返回的数据
16. 2. status:相应http的状态码,如200
17. 3. headers(函数)：头信息的getter函数，可以接受一个参数，用来获取对应名字的值
18. 4. config(对象)：生成原始请求的完整设置对象
19. 5. statusText:相应的http状态文本，如"ok"
20. $http({
21. url:url,           //请求的url路径
22. method:method,    //GET/DELETE/HEAD/JSONP/POST/PUT
23. params:params ,   //转为  ?param1=xx1¶m2=xx2的形式
24. data: data        //包含了将被当做消息体发送给服务器的数据，通常在POST请求时使用
25. }
26. }).success(function(response, status, header, config, statusText){
27. //成功处理
28. }).error(function(data,header,config,status){
29. //错误处理
30. });
31. then写法与success参数是等价的,then方法和success方法的主要区别就是，then方法会接受到完整的响应对象，而
32. success则会对响应对象进行析构。
33. AngularJS中的简单请求  ---  $http   --- 一个类似jquery的$.ajax的对象，用于异步请求
34. 语法：
35. $http服务的设置对象:
36. 当我们把$http当成函数来使用时即$http()，需要传入一个对象，这个对象可以包含以下键
37. 1、method 字符串  表示发送的请求类型 get post jsonp等等
38. 2、url 字符串 绝对或者相对的URL,请求的目标
39. 3、params 字符串或对象 会被转化成查询字符串加到URL后面，如果不是字符串会被JSON序列化
40. 4、data 字符串或者对象 这个对象包含了被当做消息体发送给服务器的数据，一般在POST请求中使用，并且从angular1.3开始可以在POST请求里发送二进制数据
41. 如var blob = new Blob({name:’张三’}); $http({method:’get’,url:’/‘,data:blob});
42. 5、headers 对象 在我们做POST跨域和后台配合的时候就用到了headers，其代表随请求发送的HTTP头字符串
43. 6、xsrfHeaderName 字符串 保存XSFR令牌的HTTP头的名称
44. 7、xsrfCookieName  字符串 保存XSFR令牌的cookie的名称
45. 8、transformRequest 函数或函数组 用来对HTTP请求头和体信息进行转换，并返回转化后的版本，通常用于在请求发送给服务器之前对其序列化
46. 9、transformResponse 函数或函数组 用来HTTP响应头和响应体信息进行转换，并返回转化后的版本，通常用来反序列化
47. 10、cache 布尔或缓存对象 如果设置为true angularjs会用默认的$http缓存对GET请求进行缓存
48. 11、timout 数值或者promise对象，如果为数值那么请求会在指定的毫秒后结束(会跳到失败的error方法里) ，如果为对象那么promise对象在被resolve时请求会被中止，方法执行完毕再执行请求
49. 12、responseType 字符串 该选项会在请求中设置XMLHttpResponseType属性有以下类型： “”字符串默认，”arraybuffer”(arraybuffer)，”blob”(blob对象)，“document”(HTTP文档)，”json“(从JSON对象解析出来的json字符串)，”text“(字符串)，”moz-blob“(Firefox的接收进度事件)，”moz-chunked-text“(文本流)，”moz-chunked-arraybuffer”(arraybuffer流)
50. $http服务的快捷方法
51. $http提供了一些快捷方法让我们使用，一共有六个(其实是六种请求模式)
52. 1、$http.get(url字符串，config可选的配置-对象类型) 返回HttpPromise对象
53. 2、$http.delete(url字符串，config可选的配置-对象类型) 返回HttpPromise对象
54. 3、$http.head(url字符串，config可选的配置-对象类型) 返回HttpPromise对象
55. 4、$http.jsonp(url字符串，config可选的配置-对象类型) 返回HttpPromise对象
56. 5、$http.post(url字符串，data对象或字符串，config可选的配置-对象类型) 返回HttpPromise对象
57. 6、$http.put(url字符串，data对象或字符串，config可选的配置-对象类型) 返回HttpPromise对象
58. $http({
59. url:url,           //请求的url路径
60. method:method,    //GET/DELETE/HEAD/JSONP/POST/PUT
61. params:params ,   //转为  ?param1=xx1¶m2=xx2的形式
62. data: data        //包含了将被当做消息体发送给服务器的数据，通常在POST请求时使用
63. }
64. }).success(function(response, status, header, config, statusText){
65. //成功处理
66. }).error(function(data,header,config,status){
67. //错误处理
68. });
69. 特别注意：
70. 1.请求参数说明：
71. url:url,           //请求的url路径
72. method:method,    //GET/DELETE/HEAD/JSONP/POST/PUT
73. params:params ,   //转为  ?param1=xx1¶m2=xx2的形式
74. data: data        //包含了将被当做消息体发送给服务器的数据，通常在POST请求时使用
75. 2.响应参数说明：
76. response     ---  响应体，即：要请求的数据
77. status       ---  HTTP状态码
78. header      ---  头信息
79. config       ---  用来生成原始请求的完整设置对象
80. statusText   ---  相应的HTTP状态文本
81. 3.缓存HTTP请求
82. 默认情况下，$http服务不会对请求进行本地缓存。在发送单独请求时，可通过向$http请求传递一个布尔参数来启用缓存
83. eg:
84. $http.get({'/api/users.json',{cache:true}})
85. .success(function(data){   })
86. .error(function(data){   })
87. 解析：
88. 第一次发送请求时，$http服务会向 /api/users.json发送一个GET请求，
89. 第二次发送同一个GET请求时，$http服务会从缓存中取回请求的结果，而不会真的发送一个HTTP GET请求
90. 设置启动缓存后，AngularJS默认会使用 $cacheFactory，这个服务在AngularJS启动时自动创建
91. 如果想要对AngularJS使用的缓存进行更多的自定义控制，可以向请求传入一个自定义的缓存实例代替true。
92. 1.GET方式   --- params参数会转为  ?param1=xx1¶m2=xx2的形式
93. 1.$http请求：
94. $http({
95. url:"/api/users.json",
96. method:'GET',
97. params:{
98. 'username':'jay'
99. }
100. }
101. }).success(function (response, status, headers, config) {
102. /*response   -- 成功返回的数据
103. status     -- 状态码
104. headers    -- 头信息
105. config     -- 其他信息
106. */
107. }).error(function (response) {
108. }
109. });
110. 2.快捷请求：
111. $http.get(url, [config])
112. .success(function(data){})
113. .error(function(data){});
114. 2.POST方式
115. $http({method : 'POST',params : { id:123}, data:{name:'john',age:27}, url : "/mypath"})
116. .success(function(response, status, headers, config){
117. //do anything what you want;
118. })
119. .error(function(response, status, headers, config){
120. //do  anything what you want;
121. });
122. 2.快捷方式：
123. $http.post(url,  $scope.formData).success(function (response, status, headers, config) {
124. ......
125. }).error(function (response) {
126. ......
127. });
128. 3.$http提交表单  --- 与Spring MVC交互， 使用这种方式
129. 通用方式：
130. $http({
131. method: "POST",
132. url: url,
133. headers: {'Content-Type': 'application/x-www-form-urlencoded'},
134. data: $.param($scope.formData)
135. }).success(function(result){
136. }).error(function(result){
137. });
138. 快捷方式：
139. $http.post(url, $scope.formData)
140. .success(function(result){
141. })
142. .error(function(result){
143. });
144. eg:
145. var data = {
146. "server":$scope.server,
147. "time":$("#time").val(),
148. "day":day
149. }
150. $http({
151. method: "post",
152. url: ctx+'/player/lossPlayer/list.htm',
153. headers: {'Content-Type': 'application/x-www-form-urlencoded'},
154. data: $.param(data)
155. }).success(function(result){
156. if(result.tip!=undefined){
157. //当前绑定的数据清空
158. $scope.players = [];
159. alert(result.tip);
160. }else{
161. console.log(result.json);
162. $scope.players = $.parseJSON($.parseJSON(result.json).players);
163. }
164. });
165. 4.使用$http指定的方法发送HTTP请求：
166. get(url, [config]);
167. delete(url, [config]);
168. post(url, data, [config]);
169. put(url, data, [config]);
170. 5.发送jsonp请求：
171. 为了发送JSONP请求，url中必须包含JSON_CALLBACK参数， jsonp(url,config) 其中config是可选的
172. eg:
173. var promise=$http.jsonp("/api/users.json?callback=JSON_CALLBACK");