AngularJS 教學 - Ajax(1)

上一篇 簡單介紹了 AngularJS 使用 Ajax 的方式 接下來繼續介紹一些 AngularJS 常用的 Ajax 設定

AngularJS 利用 $http 這個 Service 物件做為 Ajax 的一個管道

但是在多數複雜的應用中，我們的 Ajax 請求或回傳可能稍微複雜需要設定一些額外的參數

譬如說 HTTP 的請求表頭、HTTP 的 method(POST、PUT、DELET)之類的

所以以下列出幾個比較常用到的參數設定

首先在上一篇看過一個簡單的 Ajax 方式，如下：

$http.get("todos.json").success(function (data) {

    return data;

});

如果要加上額外的設定，可以類似這樣：

var config = {
    //你的設定參數在這
};

$http.post("/todos", config).success(function (data) {

    return data;

});

接下來就來看看有哪些參數可以設定

• url、method

          url 是設定你要的請求的URL路徑， 而 method 則是 HTTP 的請求方法，例如：

          var config = {

          method: 'GET', 

          url: '/todos'

      };

      $http(config).then(....);

      //上面等同於以下

      $http.get('/todos').then(....)

• data

          data 可以上你設定你想要送到 server 上的資料，如果資料是一個 javascript 物件

          AngularJS 跟其他框架一樣會將這個物件序列化成一個 JSON 

          例如：

           var config = {

          data: {
              uid: 10, 
              todos: [
                  {name:'phone call',priority:'Low'},
                  {name:'meeting',priority:'High'}
              ]
          }
      };

           多半使用到 data 的設定都是在使用 $http 的 post 或是 put 這方面的 HTTP method 時
           才會透過 data 來夾帶資料到 server

• headers

          headers 顧名思義就是HTTP請求的表頭了，不請處的可以參考 HTTP header wiki

          設定方式就類似如下：

           var config = {

          headers:{
              "content-type": "application/xml",
              "accept-encoding": "gzip"
          }
      };

• timeout

          設定一個 Ajax 請求的 Time out 時間，是以毫秒表示，例如

          var config = {

          timeout:60000
      };

• params

          設定 URL 的參數，通常用在 GET 或是 DELETE 的情況較多，例如：

      var config = {

          method: 'GET', 

          url: '/todos',

          params:{

              uid: '10'

          }

      };

      $http(config).then(....);

      //上面等同於以下

      $http.get('/todos?uid=10').then(....)

• transformRequest、transformResponse

          從字面上字義就是將 Request 或是 Response 的資料做轉換，雖然這是一個蠻好用的方式

          但是我是認為如果有額外個 Response 轉換，能夠在 Server side 做掉的就盡量做掉了