[jQuery][筆記] 小心使用 Ajax 防止 Bug 產生

2013-06-02

96195
0
jQuery

一般在開發動態網頁時，時常會用到 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，希望這篇文章能幫助你並且建立正確的操作觀念。

新手發文，如有錯誤煩請告知，感謝。
如果喜歡我的文章請按推薦，有任何問題歡迎下面留言~~~

簽名：

學習這條路很廣，喜歡什麼技術不重要，重要的是你肯花時間去學習

jQuery

回首頁

新手發文，如有錯誤煩請告知，感謝。 如果喜歡我的文章請按推薦，有任何問題歡迎下面留言~~~

新手發文，如有錯誤煩請告知，感謝。
如果喜歡我的文章請按推薦，有任何問題歡迎下面留言~~~