Arsip Kategori: Javascript

Simple Partial Loading di JQuery

(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)

JSON Formatter

JSON atau Javascript Object Notation adalah sebuah format pertukaran data yang ringan dan mudah ditulis atau dibaca oleh manusia. Karena ringan, format ini sering dipakai dalam pertukaran data. Contoh format data JSON.

{
    "glossary": {
        "title": "example glossary",
		"GlossDiv": {
            "title": "S",
			"GlossList": {
                "GlossEntry": {
                    "ID": "SGML",
					"SortAs": "SGML",
					"GlossTerm": "Standard Generalized Markup Language",
					"Acronym": "SGML",
					"Abbrev": "ISO 8879:1986",
					"GlossDef": {
                        "para": "A meta-markup language, used to create markup languages such as DocBook.",
						"GlossSeeAlso": ["GML", "XML"]
                    },
					"GlossSee": "markup"
                }
            }
        }
    }
}

Kadang-kadang untuk menghemat data maka seluruh whitespace dihilangkan dari format data. Penghematan ini jelas membuat format data menjadi susah terbaca oleh manusia.

{"glossary":{"title":"example glossary","GlossDiv":{"title":"S","GlossList":{"GlossEntry":{"ID":"SGML","SortAs":"SGML","GlossTerm":"Standard Generalized Markup Language","Acronym":"SGML","Abbrev":"ISO 8879:1986","GlossDef":{"para":"A meta-markup language, used to create markup languages such as DocBook.","GlossSeeAlso":["GML","XML"]},"GlossSee":"markup"}}}}}

Code beautifier adalah salah satu perkakas untuk membuat kode menjadi terbaca. Salah satu caranya adalah dengan indenting yakni menambahkan whitespace pada kode. Dengan perkakas ini, kode kedua dapat kembali mejadi yang pertama.

Baca Lebih Lanjut »

DateJS: Senjata Javascript Ampuh Manipulasi Date

DateJS adalah sebuah library Javascript yang memudahkan kita untuk melakukan manipulasi waktu. Script ini memiliki fungsi-fungsi yang menarik seperti add, today, tommorrow, sekaligus parse dan dapat melakukan chaining. Meski masih dalam tahap alpha tapi sudah menyediakan fungsi-fungsi yang sangat lengkap dan sudah dapat berjalan dengan cukup baik untuk kebutuhan-kebutuhan mendasar.

Dan hal yang menyenangkan lagi adalah library ini dapat digunakan bersama-sama dengan JQuery.

Berikut contoh yang ada di situsnya.

// What date is next thrusday?
Date.today().next().thursday();

// Add 3 days to Today
Date.today().add(3).days();

// Is today Friday?
Date.today().is().friday();

// Number fun
(3).days().ago();

// 6 months from now
var n = 6;
n.months().fromNow();

// Set to 8:30 AM on the 15th day of the month
Date.today().set({ day: 15, hour: 8, minute: 30 });

// Convert text into Date
Date.parse(‘today’);
Date.parse(‘t + 5 d’); // today + 5 days
Date.parse(‘next thursday’);
Date.parse(‘February 20th 1973′);
Date.parse(‘Thu, 1 July 2004 22:30:00′);

XHR Wrapper

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
}

Baca Lebih Lanjut »

AJAX-JSON

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

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.
Baca Lebih Lanjut »