Dari dua tulisan terdahulu tentang Pengantar AJAX dan JSON, kita akan padukan keduanya. Di sini saya coba untuk menjelaskan implementasi keduanya menggunakan native JavaScript supaya cara kerja keduanya bisa dipahami dengan jalas.
Pertama, buat dokumen JSON yang disimpan ke dalam file dengan nama json-data.txt.
1 { "accounting" : [ // accounting is an array in employees
2 { "firstName" : "Ahmad",
3 "lastName" : "Masykur",
4 "age" : 25 },
5 { "firstName" : "Agung",
6 "lastName" : "Riyadi",
7 "age" : 29 }
8 ], // End "accounting" array
9 "sales" : [ // Sales is another array in employees
10 { "firstName" : "Vianton",
11 "lastName" : "Rahmat",
12 "age" : 23 },
13 { "firstName" : "Kusuma",
14 "lastName" : "Dewi",
15 "age" : 25 }
16 ] // End "sales" array
17 } // End JSON data
File data JSON tersebut yang nantinya akan dipanggil menggunakan XMLHttpRequest. Sama seperti tulisan sebelumnya, data tersebut mengandung dua buah entity yaitu accounting dan sales. Masing-masing entity memiliki data berupa array yang isinya adalah data firstName, lastName dan age.
Selanjutnya buat object XMLHttpRequest (XHR) untuk mengambil data JSON dari server. Simpan kode berikut ke dalam file get-json.js.
1 var http_request = false;
2 var _ctrl = {};
3 function makeRequest(url, ctrl) {
4 _ctrl = ctrl;
5 http_request = false ;
6 if (window.XMLHttpRequest) { // Mozilla, Safari ,...
7 http_request = new XMLHttpRequest();
8 if (http_request.overrideMimeType) {
9 http_request.overrideMimeType('text/xml');
10 // See note below about this line
11 }
12 } else if (window.ActiveXObject) { // IE
13 var aVersions = [ "MSXML2.XMLHttp.6.0",
14 "MSXML2.XMLHttp.5.0",
15 "MSXML2.XMLHttp.4.0",
16 "MSXML2.XMLHttp.3.0",
17 "Microsoft.XMLHTTP" ];
18 for (var i = 0; i < aVersions.length; i++) {
19 try { http_request = new ActiveXObject(aVersions[ i ]);
20 break;
21 }
22 catch (e)
23 {
24 // Do nothing
25 }
26 }
27 }
28 if (!http_request) {
29 alert ('Giving up :( Cannot create an XMLHTTP instance');
30 return false;
31 }
32 http_request.onreadystatechange = renderData;
33 http_request.open('GET', url, true);
34 http_request.send(null);
35 }
36 function renderData() {
37 if (http_request.readyState == 4) {
38 if (http_request.status == 200) {
39 eval("var employees = " + http_request.responseText);
40 _ctrl.innerHTML = '';
41 for (i=0; i < employees.accounting.length; i++) {
42 _ctrl.innerHTML += '<br /><strong>Accounting #' +
43 (i+1) + '</strong>' +
44 '<br />First Name : ' +
45 employees.accounting[ i ].firstName +
46 '<br />Last Name : ' +
47 employees.accounting[ i ].lastName +
48 '<br />Age : ' +
49 employees.accounting[ i ].age;
50 }
51 for (i=0; i < employees.sales.length; i++) {
52 _ctrl.innerHTML += '<br /><strong>Sales #' +
53 (i+1) + '</strong>' +
54 '<br />First Name : ' +
55 employees.sales[ i ].firstName +
56 '<br />Last Name : ' +
57 employees.sales[ i ].lastName +
58 '<br />Age : ' +
59 employees.sales[ i ].age;
60 }
61 } else {
62 alert('There was a problem with the request.');
63 }
64 }
65 }
Kode di atas, terdapat dua buah fungsi makeRequest dan renderData. Fungsi makeRequest digunakan untuk membuat object XHR dan melakukan request secara asynchron. Fungsi renderData adalah fungsi callback yang dipanggil setelah ada respon dari server. Fungsi ini digunakan untuk membuat tag HTML berdasarkan data JSON yang diperoleh dan menampilkan hasilnya di halaman.
Terakhir buat kode HTML untuk menampilkan hasil pengambilan data JSON.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Receiving JSON via AJAX</title>
<script type="text/javascript" language="javascript"
src="get-json.js" ></script>
</head>
<body>
<input type="button" value="Click me"
onclick="makeRequest('json-data.txt', document.getElementById('data'))" />
<br />
<span id="data"></span>
</body>
</html>
Halaman tersebut hanya akan menampilkan satu tombol [Click me]. Ketika tombol tesebut di-klik, fungsi makeRequest akan dipanggil dan melakukan request data 'json-data.txt' dari server. Data yang diambil kemudian dirender pada tag <span>.
JSON merupakan format data yang sederhana namun tangguh. Berdasarkan contoh kode di atas, kita dapat melihat bahwa untuk menampilkan data JSON ke dalam halam hanya dibutuhkan beberapa baris kode saja.
Kode di atas merupakan kode yang sangat sederhana yang masih memiliki lobang keamanan dan sangat rentan terhadap cross-site-scripting. Jika data JSON mengandung script jahat, kode tersebut juga akan dieksekusi, karena sifat JSON dapat berisi semua object Javascript termasuk function. Untuk mengatasi masalah ini diperlukan parser untuk mem-parsing semua object yang diterima melalui AJAX. Pembahasan mengenai parsing data JSON Insya Allah akan saya bahas pada tilisan saya berikutnya. Semoga tulisan ini dapat bermanfaat untuk memulai belajar AJAX dengan format data JSON.