JSON saat ini sangat popular. Ukuran yang kecil dan kemudahan yang ditawarkan membuat JSON mudah diterima. Dan sekarang layanan-layanan API public dari google dan yahoo sudah mendukung format data ini. Kurang lengkap rasanya jika kita membahas AJAX tampa membahas tentang JSON.

Pengertian JSON

JSON (dibaca: “Jason”), singkatan dari JavaScript Object Notation adalah suatu format ringkas pertukaran data komputer. Formatnya berbasis teks dan terbaca-manusia serta digunakan untuk merepresentasikan struktur data sederhana dan larik asosiatif (disebut objek). Format JSON sering digunakan untuk mentransmisikan data terstruktur melalui suatu koneksi jaringan pada suatu proses yang disebut serialisasi. Aplikasi utamanya adalah pada pemrograman aplikasi web AJAX dengan berperan sebagai alternatif terhadap penggunaan tradisional format XML.

Walaupun JSON didasarkan pada subset bahasa pemrograman JavaScript (secara spesifik, edisi ketiga standar ECMA-262, Desember 1999 [1]) dan umumnya digunakan dengan bahasa tersebut, JSON dianggap sebagai format data yang tak tergantung pada suatu bahasa. Kode untuk pengolahan dan pembuatan data JSON telah tersedia untuk banyak jenis bahasa pemrograman. Situs json.org menyediakan daftar komprehensif pengikatan JSON yang tersedia, disusun menurut bahasa. (id.wikipedia.com)

Contoh Json

1
2
3
4
5
6
7
8
9
10
11

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

data diatas setara dengan

1
2
3
4
5
6
7

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

JSON Vs XML

Dalam membanding kan antara json dan XML penulis mengambil kreteria beriku dalam membandingkannya.

  • Human readability. Mudah dibaca adalah kreteria yang penting karena dalam proses pembuatan dan mendebug akan memudahkan programmer. XML lebih mudah dibaca dan di debug dibanding kan JSON. Perhatikan dan bandingkan 2 contoh berikut

    XML

    1
2
3
4

    <person>
   <firstname>Ibnu</firstname>
   <lastname>daqiqil</lastname>
</person>

    JSON:

    1
2
3
4

    ({
   "firstName" : "Ibnu",
   "lastName" : "Daqiqil"
});
  • Kemudahan dibuat disisi server. Artinya ada dukungan dari server side untuk menggenerate data dalam format tersebut. Di php pembuatan data berformat json jauh lebih mudah apalagi di php versi 5.2. Cukup dengan memanggil fungsi json_encode maka sebuah format JSON sudah dapat di buat. Contoh
    XML

    1
2
3
4
5

    $doc = new DOMDocument( );
$ele = $doc->createElement( 'nama' );
$ele->nodeValue = 'Sensei Ninja PHP';
$doc->appendChild( $ele );
print $doc->saveHTML( );

    JSON

    1
2

    $data = array ("nama" => "Sensei Ninja PHP");
print json_encode($data);
  • Kemudahan processing di client side. Json sangat mudah di proses di client side trutama di javascript. contoh 
    1
2

    var person = eval(xhr.responseText);
alert(person.firstName);

    Simple saja.. dengan meng-”eval” sebuah string json maka akan berubah menjadi sebuah object javascript. berbeda dengan XML. harus diambil menggunakan proses DOM. contoh

    1
2
3

    var xml = xhr.responseXML;
var elements = xml.getElementsByTagName("firstName");
alert(elements[0].firstChild.textContent);
  • Debugging dan trouble-shooting sama-sama susah di debug. jadi harus dibaca satu2. jika XML error maka dia tidak bsa di tampilkan dengan baik. jika JSON akan muncul error di javascript anda

Jadi.. terserah anda mau menggunakan xml atau json. saya lebih prefer menggunakan JSON ketika membangung aplikasi yang bersifat large data.. sizenya akan jauh lebih kecil.

Syntax JSON

Deklarasi.
Semua object JSON di daklarasikan menggunakan spasang tanda kurawal. Jika kita menggunakan pada javascript maka kita dapat meng-assign-nya langsung ke variabel. contoh

1

var json_obj = {};

String, Integer dan Boolean.
Kita dapat memasukan ketiga tipe data diatas kedalam sebuah json object. untuk string cukup dimasukkan diantara tanda petik. contoh:

1
2
3
4
5

var json_obj = {
  nama : "Ibnu Daqiqil Id",
  umur : 24,
  menikah : false
};

Array dan object
Selain tipe data sederhana kita juha dapat mempunyai tipe data yang komplek seperti array dan object.

1
2
3
4
5
6
7
8
9
10

var json_obj = {
  nama : "Ibnu Daqiqil Id",
  umur : 24,
  menikah : false,
  acara_favorite: ['Lost', 'Chuck', 'Smallvile', 'Heroes'],
  keluarga: [
        {nama: "Joni", umur: 57, relasi: "ayah"},
        {nama: "Tina", umur: 26, relasi: "kakak"}
    ]
};

 

16 Comments

 

  1. April 8, 2010  10:07 am by Permana Jayanta Reply

    Untuk keperluan client side sudah pasti lebih enak pakai JSON

  2. April 12, 2010  10:57 pm by Hanif Reply

    wah2,,, ajax sudah sampai 4?

    • April 13, 2010  1:12 pm by ibnoe Reply

      bukan versi empat.. tapi tutorial ajax bagian 4 ^^

  3. April 14, 2010  7:11 pm by rizkyabdilah Reply

    ditambahin contoh ngambil JSON ama XML pake jQuery tambah siph.. :)

  4. May 4, 2010  10:28 am by zulkarnaen is Reply

    Saya adalah seorang programmer dan application support di sebuah perusahaan asing, dan baru mencoba untuk membuat applikasi berbasis web. Uhhh.. ternyata ribet juga ya alias capek. Untuk membuat satu applikasi aja, bisa melibatkan lebih dari satu bahasa web applikasi. Ampuun ampun.

    • October 2, 2011  8:19 pm by ukung Reply

      saya juga mempelajari beberapa bahasa P, web betul kaya fitur.

  5. May 25, 2010  4:40 pm by cwicaksono Reply

    wah ternyata semudah itu ya JSON, langsung di bookmark ah siapa tahu bisa diterapkan di project saya

  7. June 26, 2010  1:02 pm by jinsun Reply

    biasa ajah..

  8. July 17, 2010  2:04 pm by zoel Reply

    trims tutorlnya bang! ditunggu tutor berikutnya ......dilanjut lagi yah!

  9. September 2, 2010  4:15 pm by adiputra Reply

    mau tanya mas,,jadi kesimpulannya lebih enak pake JSON atao XML *dalam penggunaan di ajax* ?

    lalu kelemahanya dari keduanya itu apa ?

    satu lagi tanya,,sy dapet info katanya XML itu pas digunain kalu kita ngebuat web service..benar itu mas ?

    buat pemula seperti saya,,lebih baik belajar JSON dulu atao XML ?

    makasih seblumnya....

  10. September 3, 2010  11:56 am by ibnoe Reply

    @adiputra
    - lebih mudah menggunakan JSON karena penggunaan dom agak susah

    - kelemahan json terletak di fiturnya, kurang validasi struktur

    - iya kebanyakan webservice menngunakan xml tetapi ada juga yang menggunakan json

    - tergantung kebutuhan, kalo diui mending json dlu

  11. September 9, 2010  6:21 am by adiputra Reply

    # kelemahan json terletak di fiturnya, kurang validasi struktur #

    maksudnya gmn ya mas,,gak ngerti ?
    bisa dicontohkan sederhananya...

    makasih infonya ini mas,,,sangat berguna buat pemula sperti saya...

  12. December 15, 2010  11:23 pm by yopi Reply

    udah di coba ngak jalan-jalan..
    bingung

  13. March 30, 2011  11:34 am by fananicenter Reply

    CTRL + D ...

  14. October 2, 2011  8:17 pm by ukung Reply

    artikel yg sangat baik. aplouse.

Leave a reply

 

Your email address will not be published.

Related posts

 

Read more →
 
 

Belajar Ajax - Pengenalan Ajax

Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan[...]

Read more →
 
 

Menggunakan Firebug

Firebug adalah salah satu pluggin Firefox yang harus ada bagi seorang developer web. Dengan firebug kamu dapat mengedit, mendebug, dan memonitor CSS, HTML, dan JavaScript secara l[...]