[jQuery] 小心使用AJAX防止Bug產生

其實AJAX我還沒學好，在研究的時候看到這篇覺得應該記錄一下 :D

來源：分享你的 Coding 新鮮事I love Coding and I like Sharing !

---

前言

一般在開發動態網頁時，時常會用到AJAX的技術來跟Server端取得資料，AJAX的好處相信有用過的人一定都知道，但當然有好處還是有需要注意的地方，在操作AJAX時其實還是有許多地方需要注意，這邊整理幾個新手在操作AJAX時容易遇到的問題，也希望新手在開發時能有所幫助。

小心使用AJAX

首先我們看一下，這是一個很基本的操作AJAX時會用到的參數，這邊就不再多述了，想要了解參數的用法可以到W3school看使用手冊。

$.ajax({
    url: '',                        // url位置
    type: 'post',                   // post/get
    data: { querytag: data },       // 輸入的資料
    error: function (xhr) { },      // 錯誤後執行的函數
    success: function (response) { }// 成功後要執行的函數
});

接著，我們看幾個範例來把臭蟲抓出來~

範例一：

var result = $.ajax({
    url: '/Home/Get',
    type: 'get',
    error: function (xhr) {
        return false;
    },
    success: function (response) {
        return true;
    }
});
console.log(result);

如果以直線思考第一直覺會覺得result的值一定是true或false，但實際上輸出時卻是一個Object，從error、success兩個參數return的值並不會指向給result，而console.log(result)輸出會看到result的值是$.ajax方法的參數，像是result.status、result.statucCode、result.statusText…等，使用上需要特別注意！

範例二：

$(function () {
    var result= GetData();
});

function GetData() {
    var result;
    $.ajax({
        url: '/Home/Get',
        type: 'get',
        error: function (xhr) {
            result = false;
        },
        success: function (response) {
            result = true;
        }
    });
    return result;
}

有了錯誤一的例子，接著我們修改一下我們的程式碼，我們將result的值宣告成變數，並在error或success時分別給予false或true最後在將result的參數return回去，看起來這次應該是沒問題了，但實際上執行result的結果會是undefined，這是為什麼呢？其實是因為$.ajax方法預設的async:true啟動非同步方法，也就是說並不會等$.ajax執行完成才return，而是一開始就直接return了，所以result的值當然會是undefined。

所以要解決這個問題，就是採用同步的方法來請求，所以我可以將async設成false：

async: false //啟用同步請求

這例子會滿常遇到的，因為我們很常會跟Server端請求資料，然後依據返回的值執行不同的結果，所以在操作上也需要注意一下。

範例三：

var arr = [1, 2, 3, 4, 5];
$.ajax({
    url: '/Home/Post',
    type: 'post',
    data: { data: arr },
    success: function (response) {
        result = true;
    }
});

這個範例說明了，我們要傳遞一個arr的陣列至Server端，但我們會發現Server端的參數一直會是null，而這個問題的解決方法可以將traditional設成true，改以傳統的方法來序列化資料就能正常傳遞至Server端了：

tradition:true //傳遞陣列需設定

另外需要注意的是，請求的方法也須設成post否則也會無法成功接收陣列資料。

範例四：

假設今天頁面的資料是透過AJAX取得的，在預設的情況下cache是true，如下：

$.ajax({
    url: '/Home/Get',
    type: 'get',
    cache: true, // 預設值為 true
    success: function (response) {
    }
});

而值得注意的是，在預設設定下以筆者的經驗使用IE8瀏覽利用AJAX抓回來產生的頁面，會發現一直持續抓到舊資料，如果哪天你發現你寫的AJAX在你的瀏覽器上一直瘋狂的抓到舊資料，也可以試試看將cache設為false來確定是不是這個問題所導致的。

總結

這篇整理了筆者在操作AJAX時碰到的一些例子，分享出來跟大家一起共勉之，而新手比較容易碰到的大概就是利用AJAX傳遞陣列的問題了，這當初也困擾筆許久，另外在操作AJAX時也需要注意cache這個參數，筆者記得似乎當時在IE8上就碰到因為預設cache為true，導致每次抓回來的資料都一樣，所以如果要避免抓回來都是舊的資料還是把cache設為false，希望這篇文章能幫助你並且建立正確的操作觀念。