# jQuery 的 $.ajax() 筆記

###### tags: `JavaScript`, `Ajax`

* [XMLHttpRequest — JavaScript 發送 HTTP 請求 (I)](https://notfalse.net/29/xmlhttprequest)
* [jQuery Ajax — JavaScript 發送 HTTP 請求 (II)](https://notfalse.net/30/jquery-ajax)
* 筆記
1. jQuery實作ajax的方法
* 低階用法(Low-Level Interface)： [jQuery.ajax()](https://api.jquery.com/jquery.ajax/)
* 簡短用法(Shorthand Methods)：
|方法 |說明 |
|----|----|
|[jQuery.get()](https://api.jquery.com/jQuery.get/)|實作HTTP GET請求|
|[jQuery.post()](https://api.jquery.com/jQuery.post/)|實作HTTP POST請求|
|[jQuery.getJSON()](https://api.jquery.com/jQuery.getJSON/)|實作HTTP GET請求，載入JSON資料|
|[jQuery.getScript()](https://api.jquery.com/jQuery.getScript/)|實作HTTP GET請求，載入JavaScript檔案並執行|
* 方式一：[$.ajax()](https://api.jquery.com/jquery.ajax/)

            $.ajax({
              url: 'api/imgData.json',
              dataType: 'json'
            })
            .always(function(obj) {
              console.log(obj);
            });

* 方式二：[jQuery.getJSON()](https://api.jquery.com/jquery.getjson/)

            $.getJSON('api/imgData.json', {}, function(json, textStatus) {
                console.log(json);
            });

2. 多個ajax的處理方式
* 不管執行順序，多個ajax執行完後給一個結果：[jQuery.when()](https://api.jquery.com/jQuery.when/)

            // 三個ajax操作都結束以後，才執行then方法指定的 doneCallbacks 函式
            
            var ajax1 = $.get("main/func1/");
            var ajax2 = $.post("main/func2/","condition");
            var ajax3 = $.get("main/func3/");
            
            var doneCallbacks = function(res1,res2,res3){
                console.log('ajax1:',res1)
                console.log('ajax2:',res2)
                console.log('ajax3:',res3)
                $('body').append('<p>三個ajax都執行完了！</p>')
            }
            var failCallbacks = function() {
                console.log("ajax執行有問題！");
            }
            
            $.when(ajax1,ajax2,ajax3)
             .then(doneCallbacks, failCallbacks);

* 執行的順序很重要，要一步接著一步走：[jQuery.deferred();](https://api.jquery.com/jQuery.Deferred/) / [promise();](https://api.jquery.com/promise/) (jQuery 1.5 以上才支援)

            function ajax1(){
                var def = $.Deferred()
                $.ajax({
                  url: 'http://www.yacoding.com/jquery.php?ran='+Math.random(),
                  dataType: 'json'
                }).then(function(){
                  $('body').append('<p>ajax1 success</p>')
                  def.resolve()
                },function(){
                  $('body').append('<p>ajax1 fail</p>')
                  def.reject()
                })
                return def.promise()
            }

            function ajax2(){
                var def = $.Deferred()
                $.ajax({
                  url: './api/test1.json?ran='+Math.random(),
                  dataType: 'json'
                }).then(function(){
                  $('body').append('<p>ajax2 success</p>')
                  def.resolve()
                },function(){
                  $('body').append('<p>ajax2 fail</p>')
                  def.reject()
                })
                return def.promise()
            }

            function ajax3(){
                var def = $.Deferred()
                $.ajax({
                  url: './api/test2.json?ran='+Math.random(),
                  dataType: 'json'
                }).then(function(){
                  $('body').append('<p>ajax3 success</p>')
                  def.resolve()
                },function(){
                  $('body').append('<p>ajax3 fail</p>')
                  def.reject()
                })
                return def.promise()
            }

            ajax1().then(ajax2).then(ajax3).then(function(){
                $('body').append('<p>三個ajax都執行完了！</p>')
              },function(){
                $('body').append('<p>ajax執行有問題！</p>')
              })

4. 建議讓ajax結構單純化，將大量處理畫面的邏輯用函式獨立出來。

        $.ajax({
            url: './api/imgData.json',
            dataType: 'json'
          })
          .done(function(res) {
            init(res.list);
          })

        function init(list){
          $.each(list, function(index, value) {
            $("<li></li>").append($("<img>")
              .attr('src',value.src)).appendTo($('.imgList'))
          });
        }

* 延伸閱讀
1. [MDN Web Doc - Ajax](https://developer.mozilla.org/zh-TW/docs/Web/Guide/AJAX)
2. [什麼是 Ajax？ 搞懂非同步請求 (Asynchronous request)概念](https://tw.alphacamp.co/blog/ajax-asynchronous-request)
3. [卡伯斯Blog - AJAX 完整解說系列：基礎觀念](https://wcc723.github.io/development/2020/09/30/about-ajax/)
4. [卡伯斯Blog - AJAX 完整解說系列：新增、更新、刪除（POST/PATCH/DELETE）](https://wcc723.github.io/development/2020/10/01/about-ajax-2/)
5. [卡伯斯Blog - AJAX 完整解說系列：使用 Chrome Devtools 檢視請求及回應](https://wcc723.github.io/development/2020/10/02/about-ajax-3/)
6. [卡伯斯Blog - AJAX 完整解說系列：輕鬆搞懂 HTTP 狀態碼（HTTP Status Code）](https://wcc723.github.io/development/2020/10/03/about-ajax-4/)
7. [MDN Web Doc - Promise 物件](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise)
8. [使用 JQuery 透過 FormData 上傳檔案](https://askie.today/using-formdata-and-setting-multipart-to-upload-file-by-ajax/)
9. ajax 替代方案：
* [axios](https://axios-http.com/)
* JavaScript原生介面 [Fetch API](https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API/Using_Fetch)