Format Data Pada Respon Ajax

Ketika Ajax mengirim request ke server, maka akan ada balasan dari server berupa data. Nah, data yang dikirim dari server ke ajax ini ada macam-macam. Pada contoh-contoh sebelumnya, anda telah melihat data yang dikirim berupa text atau HTML. Seperti contoh di bawah ini, program PHP memberikan data berupa HTML.

while($k=mysql_fetch_array($query)){
echo ‘<li onClick=”isi(\”.$k[0].’\’);”
style=”cursor:pointer”>’.$k[0].'</li>’;
}

Scroll untuk melihat konten

Pada contoh tersebut, program PHP memberikan output berupa HTML dengan tag <li>. Ada beberapa format data yang populer yang biasa digunakan untuk untuk mengirim data dari server ke client, yaitu JSON, Text, AHAH, XML dan lainnya.

JSON

JSON (JavaScript Object Notation) adalah format pertukaran data yang ringan, mudah dibaca dan ditulis oleh manusia, serta mudah diterjemahkan dan dibuat (generate) oleh komputer. Format ini dibuat berdasarkan bagian dari Bahasa Pemprograman JavaScript, Standar ECMA-262 Edisi ke-3 – Desember 1999. JSON merupakan format teks yang tidak bergantung pada bahasa pemprograman apapun karena menggunakan gaya bahasa yang umum digunakan oleh programmer keluarga C termasuk C, C++, C#, Java, JavaScript, Perl, Python dll. Oleh karena sifat-sifat tersebut, menjadikan JSON ideal sebagai bahasa pertukaran-data. Beberapa orang lebih suka JSON, karena paling mudah untuk mem-parse-nya, hanya menempatkan sebuah eval dan selesai sudah.
JSON terbuat dari dua struktur:

• Kumpulan pasangan nama/nilai. Pada beberapa bahasa, hal ini dinyatakan sebagai objek (object), rekaman (record), struktur (struct), kamus (dictionary), tabel hash (hash table), daftar berkunci (keyed list), atau associative array.
• Daftar nilai terurutkan (an ordered list of values). Pada kebanyakan bahasa, hal ini dinyatakan sebagai larik (array), vektor (vector), daftar (list), atau urutan (sequence).

Struktur-struktur data ini disebut sebagai struktur data universal. Pada dasarnya, semua bahasa pemprograman moderen mendukung struktur data ini dalam bentuk yang sama maupun berlainan. Hal ini pantas disebut demikian karena format data mudah dipertukarkan dengan bahasa-bahasa pemprograman yang juga berdasarkan pada struktur data ini.

JSON menggunakan bentuk sebagai berikut:
Object adalah sepasang nama/nilai yang tidak terurutkan. Objek dimulai dengan { (kurung kurawal buka) dan diakhiri dengan } (kurung kurawal tutup). Setiap nama diikuti dengan : (titik dua) dan setiap pasangan nama/nilai dipisahkan oleh , (koma).

Array adalah kumpulan nilai yang terurutkan. Larik dimulai dengan [ (kurung kotak buka) dan diakhiri dengan ] (kurung kotak tutup). Setiap nilai dipisahkan oleh , (koma).

Nilai (value) dapat berupa sebuah string dalam tanda kutip ganda, atau angka, atau true atau false atau null, atau sebuah objek atau sebuah larik. Struktur-struktur tersebut dapat disusun bertingkat.

String adalah kumpulan dari nol atau lebih karakter Unicode, yang dibungkus dengan tanda kutip ganda. Di dalam string dapat digunakan backslash escapes “\” untuk membentuk karakter khusus. Sebuah karakter mewakili karakter tunggal pada string. String sangat mirip dengan string C atau Java.

Angka (number)  adalah sangat mirip dengan angka di C atau Java, kecuali format oktal dan heksadesimal tidak digunakan.

Contoh JSON

Sekarang mari kita lihat contoh-contoh bentuk JSON yang saya ambil dari json.org. Berikut bentuk XML, yang telah familiar dengan kita.

<menu id=”file” value=”File”>
<popup>
<menuitem value=”New” onclick=”CreateNewDoc()” />
<menuitem value=”Open” onclick=”OpenDoc()” />
<menuitem value=”Close” onclick=”CloseDoc()” />
</popup>
</menu>

Jika kita ubah ke bentuk JSON adalah :

{“menu”: {
“id”: “file”,
“value”: “File”,
“popup”: {
“menuitem”: [
{“value”: “New”, “onclick”: “CreateNewDoc()”},
{“value”: “Open”, “onclick”: “OpenDoc()”},
{“value”: “Close”, “onclick”: “CloseDoc()”}
]
}
}}

Bentuk XML :

<widget>
<debug>on</debug>
<window title=”Sample Konfabulator Widget”>
<name>main_window</name>
<width>500</width>
<height>500</height>
</window>
<image src=”Images/Sun.png” name=”sun1″>
<hOffset>250</hOffset>
<vOffset>250</vOffset>
<alignment>center</alignment>
</image>
<text data=”Click Here” size=”36″ style=”bold”>
<name>text1</name>
<hOffset>250</hOffset>
<vOffset>100</vOffset>
<alignment>center</alignment>
<onMouseUp>
sun1.opacity = (sun1.opacity / 100) * 90;
</onMouseUp>
</text>
</widget>

Bentuk JSON :

{“widget”: {
“debug”: “on”,
“window”: {
“title”: “Sample Konfabulator Widget”,
“name”: “main_window”,
“width”: 500,
“height”: 500
},
“image”: {
“src”: “Images/Sun.png”,
“name”: “sun1”,
“hOffset”: 250,
“vOffset”: 250,
“alignment”: “center”
},
“text”: {
“data”: “Click Here”,
“size”: 36,
“style”: “bold”,
“name”: “text1”,
“hOffset”: 250,
“vOffset”: 100,
“alignment”: “center”,
“onMouseUp”: “sun1.opacity = (sun1.opacity / 100) * 90;”
}
}}

Membuat JSON di sisi server

Sekarang mari kita lihat bagaimana cara membuat bentuk bentuk JSON. Dari sisi server kita akan membuat JSON menggunakan PHP, pada PHP versi 5.2 telah terdapat fungsi untuk membuat JSON, yaitu fungsi json_encode() encode().
Syntax-nya adalah sebagai berikut

string json_encode ( mixed $value [, int $options= 0 ] )

$value, adalah nilai yang akan di encode menjadi string JSON
$option, bisa berupa JSON_HEX_QUOT, JSON_HEX_TAG, JSON_HEX_AMP,
JSON_HEX_APOS, JSON_FORCE_OBJECT, defaultnya adalah 0.

Contoh :
<?php
$arr = array (‘a’=>1,’b’=>2,’c’=>3,’d’=>4,’e’=>5);
echo json_encode($arr);
?>

Kode di atas akan menghasilkan :

{“a”:1,”b”:2,”c”:3,”d”:4,”e”:5}

Selain menggunakan json_encode(), kita juga bisa membuat JSON secara manual dengan menggunakan PHP.
Misal, kita memiliki tabel di MySQL dengan struktrur sebagai berikut :

CREATE TABLE `message` (
`message_id` INT(11) NOT NULL AUTO_INCREMENT,
`chat_id` INT(11) NOT NULL DEFAULT ‘0’,
`user_id` INT(11) NOT NULL DEFAULT ‘0’,
`user_name` VARCHAR(64) DEFAULT NULL,
`message` TEXT,
`post_time` DATETIME DEFAULT NULL,
PRIMARY KEY (`message_id`)
)

Isi dari tabel tersebut adalah sebagai berikut

Dan kita ingin membuat JSON dari tabel di atas dengan bentuk seperti ini :

{“messages”:
{“pesan”:[
{“id”: “1”,
“user”: “Nurmi”,
“text”: “Halo apa kabar”,
“time”: “4/28/2010 17:30”
},{“id”: “2”,
“user”: “Desrizal”,
“text”: “Kabar Baik”,
“time”: “4/28/2010 17:30”
},{“id”: “3”,
“user”: “Nurmi”,
“text”: “Lagi di mana”,
“time”: “4/28/2010 17:30”
},{“id”: “4”,
“user”: “Desrizal”,
“text”: “Belitung”,
“time”: “4/28/2010 17:30”
} ]
}
}

Berikut kode PHP untuk membuat JSON tersebut.

<?php
mysql_connect(“localhost”,”root”,””);
mysql_select_db(“test”);
$json = ‘{“messages”: {‘;
$query = mysql_query(“select * from message”);
$json .= ‘”pesan”:[ ‘;
while($x =mysql_fetch_array($query)){
$json .= ‘{‘;
$json .= ‘”id”: “‘ . $x[‘message_id’] . ‘”,
“user”: “‘ . htmlspecialchars($x[‘user_name’]) . ‘”,
“text”: “‘ . htmlspecialchars($x[‘message’]) . ‘”,
“time”: “‘ . $x[‘post_time’] . ‘”
},’;
}
//hilangkan koma (,) di akhir
$json = substr($json,0,strlen($json)-1);
//lengkapi penutup format JSON
$json .= ‘]’;
$json .= ‘}}’;
echo $json;
?>

Pada contoh di atas, kita membuat JSON secara manual, yang penting adalah kita harus tahu penempatan setiap elemen. Jika kita lihat outputnya di browser akan seperti berikut :

Mem-parse JSON di sisi client

Oke, setelah kita mengetahui bagaimana cara membuat output dengan format JSON, sekarang mari kita lihat bagaimana cara menguraikan format JSON tersebut menggunakan javascript. Untuk menguraikan /mem-parse JSON adalah dengan menggunakan fungsi eval(“(” + jsonteks + “)”). Selain menggunakan eval(), kita juga bisa menggunakan fungsi-fungsi yang telah dibuat orang lain, seperti yang ada di www.json.org. Para ahli, menyarankan untuk menghindari penggunaan eval(), karena kurang aman, sebaiknya gunakan fungsi-fungsi yang dibuat oleh orang lain (seperti : http://www.JSON.org/json_parse.js). Tetapi sebagai contoh pelajaran, saya akan memperlihatkan cara mem-parse menggunakan eval(). Untuk menyederhanakan contoh berikut, saya tidak membuat kode yang berbau ajax, saya anggap kita sudah memiliki teks yang berformat JSON.

<html>
<head>
<script>
function tes(){
json = ‘{“messages”: {“pesan”:[ {“id”: “1”, “user”: “Nurmi”, “text”:
“Halo apa kabar”, “time”: “2010-04-28 17:30:26” },{“id”: “2”, “user”:
“Desrizal”, “text”: “Kabar Baik”, “time”: “2010-04-28 17:30:34” },{“id”:
“3”, “user”: “Nurmi”, “text”: “Lagi di mana”, “time”: “2010-04-28
17:30:42” },{“id”: “4”, “user”: “Desrizal”, “text”: “Belitung”, “time”:
“2010-04-28 17:30:51” }]}}’
var teks_div = document.getElementById(‘divteks’);
var response = eval(“(” + json + “)”);
for(i=0;i < response.messages.pesan.length; i++) {
teks_div.innerHTML += response.messages.pesan[i].user;
teks_div.innerHTML += ‘&nbsp;&nbsp;<font size=1>’ +
response.messages.pesan[i].time + ‘</font><br />’;
teks_div.innerHTML += response.messages.pesan[i].text + ‘<br />’;
}
}
</script>
</head>
<body onload=tes()>
<div id=divteks>
</div>
</body>

Demikian panduan tentang format data pada respon ajax semoga bermanfaat, pada postingan selanjutnya nanti saya akan memberikan tutorial tentang membuat Ajax Web Chat. Ditunggu ya!!!