#

..code, catatan seorang programmer

Beralih Ke Ajax Asynchronous (Code)

Ajax Synchronous Bermasalah

Jika kita menggunakan ajax synchronous pada browser console akan tampil peringatan seperti dibawah ini:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/
Peringatannya cukup jelas: Deprecated. Sesuatu hal yang sudah usang dan pada suatu saat tidak akan digunakan lagi.

Berikut ini penulis akan share sebuah function ajax asynchronus yang siap digunakan beserta beberapa contoh cara menggunakannya. Pada akhir artikel pembaca dapat juga men-download contoh programnya.

Beralih Ke Ajax Asnychronous

Yang perlu diperhatikan saat kita melakukan call ajax asynchronous adalah flow program akan terus dilanjutkan ke baris berikutnya (tanpa menunggu hasil dari call). Oleh sebab itu perlu kita tambahkan call back function untuk memproses hasil dari call.

ajax.js
[CODE]
function ajax(postget, script, query, onarrive) {
    onarrive_type = typeof(onarrive);

    try {
        var xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            try {
                xhr = new XMLHttpRequest();
            } catch (e) {
                console.error('Failed to instancing XMLHTTP');
                return false;
            }
        }
    }

    xhr.onreadystatechange = function() {
        if ((xhr.readyState == 4) && (xhr.status > 0)) {
            var text = null;

            if (xhr.status == 200) {
                text = xhr.responseText;
            }

            try {
                if (onarrive_type == "function") { //-- Passing function
                    onarrive(text);
                } else {
                    if (onarrive != '') { //-- Passing string function name
                        window[onarrive](text);
                    }
                }
            } catch (e) {}
        }
    }

    if (query.substr(0, 1) == "?") { //-- Query started with "?"
        query = query.substring(1, query.length); //-- Remove "?"
    }

    postget = postget.toUpperCase();

    if (postget == "GET") {
        xhr.open(postget, script + "?" + query, true);
        xhr.send(null);
    } else {
        postget = "POST";

        xhr.open(postget, script, true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(query);
    }
}
[/CODE]

Berikut tiga contoh cara menggunakan function ajax diatas.

Contoh #1: Function call back digabungkan langsung
[CODE]
function call_ajax() {
    console.log('Before call');

    var oajax = new ajax("POST", "call.php", "?param1=test&param2=test",
        function get_arrive(text) {
            if (text == null) {
                console.error('Failed');
            } else {
                console.log('Return: ' + text.toString());
            }
        }
    );

    console.log('After call');
}
[/CODE]

Contoh #2: Function call back dipisahkan
[CODE]
function call_ajax() {
    console.log('Before call');

    var oajax = new ajax("POST", "call.php", "?param1=test&param2=test", "get_arrive");

    console.log('After call');
}

function get_arrive(text) {
    if (text == null) {
        console.error('Failed');
    } else {
        console.log('Return: ' + text.toString());
    }
}
[/CODE]

Contoh #3: Tanpa function call back (diabaikan)
[CODE]
function call_ajax() {
    console.log('Before call');

    var oajax = new ajax("POST", "call.php", "?param1=test&param2=test", "");

    console.log('After call');
}
[/CODE]

Contoh code diatas pembaca bisa download disini.
Share to:
Newer Post Older Post
Comments