JavaScript - jQuery ajax

 使用 jQuery 動態連網抓資料

lib func

function my_ajax(my_name, my_url, my_beforeSend, my_success, my_error, my_complete, my_dataType, my_data, my_type, my_timeout, my_retry, my_async) {
    console.group('===['+ my_name +']===');
    console.log(my_url);
    $.ajax({
        url: my_url,                                    // 連線 url
        type: my_type ? my_type : 'POST',               // 請求方式 POST/GET
        dataType: my_dataType ? my_dataType : 'html',   // 返回資料型別: ["xml" / "html" / "script" / "json" / "jsonp" / "text"]
        data: my_data ? my_data : '',                   // 輸入類型: {name:"my_name",amount:"123"} or "&name=my_name&amount=123" or Object or Array
        async: my_async ? my_async : true,              // 是否同步請求
        timeout: my_timeout ? my_timeout : 15000,       // 逾時 (單位：毫秒)
        cache: false,                                   // 設定成 false 就不會從瀏覽器中抓 cache 住的舊資料
        contentType: false,                             // application/x-www-form-urlencoded
        processData: false,                             // 設定是否自動將 data 轉為 query string
        global: false,                                  // 設定是否觸發全域 Ajax 事件 (ajaxStart, ajaxSend, ajaxSuccess, ajaxError, ajaxComplete, ajaxStop)
                                                        // 用法：$('#loading').bind('ajaxSend', function() { ... }).bind('ajaxComplete', function() { ... });
        beforeSend: function() {                        // 連線前 callback (修改 XMLHttpRequest 物件，或加 header) (return flase 可取消這次連線)
            if(my_beforeSend) {
                console.log('['+my_name+'] --- beforeSend --- ');
                my_beforeSend();
            }
        },
        success: function (data) {                      // 請求成功時 callback
            console.log('['+my_name+'] --- success --- ');
            if(my_success) {
                console.log(data);
                my_success(data);
            }
        },
        error: function (xhr, options, thrownError) {   // 請求發生錯誤時 callback
            console.log('['+my_name+'] --- error --- options='+options+', thrownError='+thrownError);
            console.log(xhr);
            if(my_retry && my_retry == 1) {
                if(confirm('連線失敗，是否重試？')) {
                    if(my_error)
                        my_error(thrownError, 1);
                    my_ajax(my_name, my_url, my_beforeSend, my_success, my_error, my_complete, my_dataType, my_data, my_type, my_timeout, my_retry, my_async);
                } else {
                    if(my_error)
                        my_error(thrownError, 0);
                }
            } else {
                if(my_error)
                    my_error(thrownError, 0);
                alert('連線失敗，請稍候再試');
            }
        },
        complete: function(xhr, textStatus) {           // 請求完成時 callback (不論結果是 success 或 error 都會呼叫)
            if(my_complete) {
                console.log('['+my_name+'] --- complete --- ');
                console.groupEnd();
                my_complete();
            } else {
                console.groupEnd();
            }
        }
    });
}

使用方法

    my_ajax(my_name, my_url, my_beforeSend, my_success, my_error, my_complete
        , my_dataType, my_data, my_type, my_timeout, my_retry, my_async);

my_name：            名稱(console 的 debug 顯示用)

my_url：                連線的網址

my_beforeSend：  連線前先呼叫的 callback

my_success：        成功呼叫的 callback

my_error：            錯誤呼叫的 callback

my_complete：    結束呼叫的 callback

my_dataType：    回傳的資料型態 "xml" / "html" / "script" / "json" / "jsonp"

my_data：            另外要附加的參數（如：'&name1=111&name2=222'）

my_type：            null / 'POST' / 'GET'

my_timeout：      逾時長度 (設定 3000 長度為3秒)

my_retry：           是否重試（0：不重試，1：詢問是否重試）

my_async：         設定為 true 表示不等待回應，可以繼續執行下一行程式（也叫做不阻塞、非同步）

jQuery ajax 內建 func

    .load(url [, data] [, complete])
    jQuery.get(url [, data] [, success] [, dataType])
    jQuery.post(url [, data] [, success] [, dataType])
    jQuery.getScript(url [, success])
    jQuery.ajax(url [, settings])

$('#my_id').load('test.html #container');  讀取 test.html 的 #container 加到 #my_id 裡