Skip navigation

Tag Archives: ajax


Sudah lama tidak mengisi blog ini karena banyak kerjaan. Oke belakangan ini gw sedang mengerjakan sebuah aplikasi menggunakan PHP Framework Yii. Framework ini cukup menyenangkan dibanding beberapa framework lain. By the way, di tulisan ini gw akan memberikan solusi gw dari sebuah permasalahan kecil yang gw hadapi.

Yii menyediakan sebuah tabel model yang kodenya digenerate. Tabel ini adalah CGridView. Tabel ini menyediakan banyak sekali fitur yang siap digenerate: pagination, column sorting, dan lain-lain. Jadi dengan menggunakannya, gw jadi tidak perlu menulis banyak kode.

Tapi satu masalah yang gw hadapi adalah bagaimana gw merefresh isi tabel ini dengan sebuah filter yang disediakan oleh sebuah Dropdown List.  Gambarnya dapat dilihat di bawah.


Read More »

Iklan

Beberapa waktu lalu saya mulai mengembangkan aplikasi iseng-iseng yakni: JMPlurk. Untuk urusan penanganan HTTP dan JSON, saya menggunakan library yakni Mobile AJAX for Java ME. Library ini lumayan mudah digunakan dan sangat lengkap untuk berbagai kebutuhan.
*tutorial menyusul, hehe*


(belakangan pengen ngeposting artikel yang gampang mikirnya, hehehe)

Kemarin ada seorang junior yang sedang belajar JQuery. Dia nanya bagaimana caranya meload bagian dari halaman HTML tanpa harus meload bagian-bagian halaman lain. Fungsi ini merupakan salah satu kegunaan dari AJAX di mana kita melakukan HTTP request tanpa harus meload halaman baru.

JQuery sudah menyediakan sebuah method yakni load. Method ini akan melakukan request ke sebuah halaman dan kemudian menginjeksikan responsenya ke dalam DOM elemen tersebut.

Contoh penggunaannya

<html>
	<head>
		<title>Test</title>
		<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script>
		<script type="text/javascript" language="javascript">
		$(document).ready(function(){
			$("#kotak").load("test5_1.html");
			$("#button1").click(function(){
				$("#kotak").load("test5_1.html");
				return false;
			});
			$("#button2").click(function(){
				$("#kotak").load("test5_2.html");
				return false;
			});
		});
	</script>

	</head>
	<body>
<ul>
	<li><a href="" id="button1">Test 1</a></li>
	<li><a href="" id="button2">Test 2</a></li>
</ul>
<div id="kotak"></div>
</body>
</html>

Untuk membuat sebuah tabpage pada HTML dan melakukan load seperti di atas, JQuery UI sudah menyediakan widget yang menarik dan high customable.

Source code dapat diambil di sini. (rename ke zip dan jangan lupa menambahkan script JQuerynya)


Baru bikin wrapper yang lumayan enak buat digunain.

/*AJAX Wrapper!*/
/**
 * @param method Request method
 * @param url Request URL
 * @param onLoad Function callback on request complete
 * @param onProgress Function callback on request progress
 * @param data
 */
function doRequest(method,url,async,onLoad,onProgress,data) {
    var xhr;
    try{
        xhr=new XMLHttpRequest();
    } catch (e) {
        // Internet Explorer
        try{
            xhr=new ActiveXObject("Msxml2.xhr");
        } catch (e) {
            try {
                xhr=new ActiveXObject("Microsoft.xhr");
            } catch (e) {
                alert("Your browser does not support AJAX!");
                return false;
            }
        }
    }
    // W3C requests and streaming
    xhr.open(method,url,async);
    if (method == "POST") /* Set request header on POST */
    {
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.setRequestHeader("Content-length", data.length);
        xhr.setRequestHeader("Connection", "close");
    }
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 3) // interactive mode
            onProgress(xhr.responseText);
        if (xhr.readyState == 4) // finished
            onLoad(xhr.responseText,xhr.status);
    }
    xhr.send(data); // finally send the request whether it be XDR or XHR
}

Read More »


Melanjutkan bahasan yang ada di blog gw tentang JSON. Penggunaan JSON sangat mudah karena sudah banyak fungsi bawaan dari berbagai bahasa yang dapat langsung kelakukan encode dan decode format data JSON.

Contoh sebuah kode PHP yang menghasilkan JSON.

//file: test2.php
<?php
	$user = array (
		"id" => 1,
		"username" => "petra",
		"fullname" => "Petra Barus"
	);

	echo json_encode($user);
?>

Jika kode ini ditampilkan secara biasa maka halaman akan menampilkan format JSON dari array $user tersebut

{"id":1,"username":"petra","fullname":"Petra Barus"}

Dengan menggunakan kode pada tulisan sebelumnya

//cut
/* Test AJAXnya */
function testAjax()
{
	var url = "test2.php";
	xmlHttp.onreadystatechange = function () {
			if (xmlHttp.readyState==4)
			{
				var user = eval("("+xmlHttp.responseText+")");
				alert("ID       : " + user.id+"\n" +
				      "Username : " + user.username +"\n" +
					  "Fullname : " + user.fullname);
			}
		};
	xmlHttp.open("GET", url, true);
	xmlHttp.send(null);
}

Seperti sebelumnya, isi dari atribut XHR responseText akan berisi tampilan dari server scriptnya. Isi ini dapat langsung diubah mejadi objek Javascript dengan menggunakan fungsi eval. Sebenarnya fungsi eval dapat mengeksekusi kode javascript apa pun tidak hanya JSON. Oleh karena itu gunakan hanya untuk kode JSON yang dipercaya.

Kode penuhnya dapat diambil di sini. (rename extension ke zip)


XML HTTP Request atau sering disingkat XHR adalah sebuah object pada API Javascript yang dapat dipakai untuk melakukan HTTP Request secara asynchronous yakni melakukan HTTP Request tanpa perlu melakukan page loading. Berikut contoh pemakaian XHR

Untuk kode client-sidenya

<html>
	<head>
		<script type="text/javascript" languange="javascript" src="test1.js"></script>
	</head>
	<body>
		<button id="button1" onclick="testAjax()">Test</button>
	</body>
</html>

Pada kode di atas halaman akan mengeksekusi fungsi testAjax setiap kali tombol button1 ditekan.
Read More »

%d blogger menyukai ini: