第20天，Ajax

AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步Javascript和XML”。即使用Javascript語言與伺服器進行異步互動，傳輸的資料為XML（當然，傳輸的資料不隻是XML）。現在基本都用JSON進行交換資料。

同步互動：用戶端發出一個請求後，需要等待伺服器響應結束後，才能發出第二個請求；

異步互動：用戶端發出一個請求後，無需等待伺服器響應結束，就可以發出第二個請求。

AJAX除了異步的特點外，還有一個就是：浏覽器頁面局部重新整理；（這一特點給使用者的感受是在不知不覺中完成請求和響應過程）

Ajax的優點：

• AJAX使用Javascript技術向伺服器發送異步請求；
• AJAX無須重新整理整個頁面；
• 因為伺服器響應内容不再是整個頁面，而是頁面中的局部，是以AJAX性能高；

jQuery實作的Ajax

點選參考

回調函數

如果要處理$.ajax()得到的資料，則需要使用回調函數。beforeSend、error、dataFilter、success、complete。

• beforeSend 在發送請求之前調用，并且傳入一個XMLHttpRequest作為參數
• error 在請求出錯時調用。傳入XMLHttpRequest對象，描述錯誤類型的字元串以及一個異常對象（如果有的話）。
• dataFilter 在請求成功之後調用。傳入傳回的資料以及"dataType"參數的值。并且必須傳回新的資料（可能是處理過的）傳遞給success回調函數。
• success 當請求之後調用。傳入傳回後的資料，以及包含成功代碼的字元串。
• complete 當請求完成之後調用這個函數，無論成功或失敗。傳入XMLHttpRequest對象，以及一個包含成功或錯誤代碼的字元串。

資料類型

通過dataType選項可以指定其他不同資料處理方式。常用的有json、jsonp、和XML。注意，JSONP是JSON格式的擴充。他要求一些伺服器端的代碼來檢測并處理查詢字元串參數。

發送資料到伺服器

預設情況下，Ajax請求使用GET方法。如果要使用POST方法，可以設定type參數值。這個選項也會影響data選項中的内容如何發送到伺服器。

data選項既可以包含一個查詢字元串，比如 key1=value1&key2=value2 ，也可以是一個映射，比如 {key1: 'value1', key2: 'value2'} 。如果使用了後者的形式，則資料再發送器會被轉換成查詢字元串。這個處理過程也可以通過設定processData選項為false來回避。如果我們希望發送一個XML對象給伺服器時，這種處理可能并不合适。并且在這種情況下，我們也應當改變contentType選項的值，用其他合适的MIME類型來取代預設的 application/x-www-form-urlencoded 。

文法

$.ajax(url,[settings])

參數：

• url : 一個用來包含發送請求的URL字元串；
• settings : Ajax請求設定，所有選項都是可選的。

settings常用選項：

• url : 發送請求的位址。（String)
• type ： (預設: "GET") 請求方式 ("POST" 或 "GET")， 預設為 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分浏覽器支援。（String）
• data : 發送到伺服器的資料。将自動轉換為請求字元串格式。GET 請求中将附加在 URL 後。檢視 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。如果為數組，jQuery 将自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 "&foo=bar1&foo=bar2"。(Object,String)。
• dataType：預期伺服器傳回的資料類型。"json": 傳回 JSON 資料 。回調函數中就可以直接使用JSON資料，而不需要先通過JSON.parse()解析。
• success(data, textStatus, jqXHR)：請求成功後的回調函數。參數：由伺服器傳回，并根據dataType參數進行處理後的資料；描述狀态的字元串。
• error：請求失敗時調用此函數。

示例1：

<script>
      //$.ajax的兩種使用方式:

      //$.ajax(settings);
      //$.ajax(url,[settings]);


       $(".send_Ajax").click(function(){

           $.ajax({
               url:"/handle_Ajax/",
               type:"POST",
               data:{username:"Yuan",password:123},

               success:function(data){
                   alert(data)
               },

                 //=================== error============

                error: function (jqXHR, textStatus, err) {

                        // jqXHR: jQuery增強的xhr
                        // textStatus: 請求完成狀态
                        // err: 底層通過throw抛出的異常對象，值與錯誤類型有關
                        console.log(arguments);
                    },

                 //=================== complete============

                complete: function (jqXHR, textStatus) {
                    // jqXHR: jQuery增強的xhr
                    // textStatus: 請求完成狀态 success | error
                    console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);
                    console.log('textStatus: %s', textStatus);
                },

                //=================== statusCode============
                statusCode: {
                    '403': function (jqXHR, textStatus, err) {
                        console.log(arguments);  //注意：後端模拟errror方式：HttpResponse.status_code=500
                     },

                    '400': function () {
                    }
                }

           })

       })

</script>
           

示例2：

$.ajax('register.html',{
                        type: 'post',
                        data: $("#f1").serialize(),
                        success: function(response_data){
                            var flag=JSON.parse(response_data);
                            if (flag['stat']){
                                location.href='/registsuccess/?username='+flag["username"]
                            }
                        }
                    });
           

$("#f1").serialize() : f1是form标簽的id，serialize()會自動收集form表單中的資料，并組成類似“user=alex&pwd=123”這樣的字元串。

response_data : 回調函數中的參數，這是伺服器傳回的資料，如果設定了dataType，則傳回的資料就是dataType設定的資料類型。假如設定dataType:"json"，那麼回傳的資料會經過jQuery内部處理成json格式的資料，可以直接使用，而不再需要通過JSON.parse(data)處理了。

jquery ajax 中 $(this) 不起作用的解決方法

第一種解決辦法

，在回調函數外部先将$(this)指派給一個變量：_this=$(this)，然後在ajax的回調函數中直接使用_this操作目前标簽。

第二種解決辦法

，如果一定要在ajax的回調函數中使用$(this)操作目前标簽，那就需要用bind(this)綁定this到回調函數。如：success: function(){ ... }.bind(this)