<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<script></script>
</head>
<body>
<input type = "hidden" id = "jsonCapture"/>
<button>Click Here</button>
<div id = "infoContainer"></div>
</body>
</html>
Kalau menggunakan database ada tiga cara:
- Memakai slow-update database: yaitu meletakkan seluruh database dalam file HTML sehingga ketika akan mengupdate harus membongkar file HTML yang dimaksud
- Memakai quick-update database: yaitu meletakkan seluruh database dalam file yang terpisah yang diakses lewat server. Untuk mengupdate database cukup membongkar file database saja
- Memakai fast-update database: yaitu meletakan seluruh database dalam server database yang bisa diakses langsung melalui file HTML sehingga update database bisa dilakukan secara otomatis. Membutuhkan bahasa pemrograman web yang mendukung server database spt php atau aspx
Dalam artikel ini akan digunakan quick-update yang praktis walaupun memerlukan sedikit usaha.
Siapkan sebuah file TEXT yang berisi JSON sbb:
{ "records" : [
{ "id" : "0000", "name" : "Tomo", "age" : "29" },
{ "id" : "0001", "name" : "Dewi", "age" : "28" }
] }
Simpan sebagai database.txt
Selanjutnya edit bagian <script></script> di atas menjadi sbb:
function loadData()
{
var xhr = new XMLHttpRequest();
xhr.open("GET","http://localhost:9000/database.txt","true");
xhr.onreadystatechange = function(){ document.getElementById("jsonCapture").value = xhr.responseText; }
xhr.send(null);
}
function getData()
{
var obj = JSON.parse(document.getElementById("jsonCapture").value);
var result = "<table><tr><td style = 'border-style: solid; border-color: red'>" + obj.records[0].id + "</td><td style = 'border-style: solid; border-color: red'>" + obj.records[0].name + "</td><td style = 'border-style: solid; border-color: red'>" + obj.records[0].age + "</td></tr>";
result += "<tr><td style = 'border-style: solid; border-color: red'>" + obj.records[1].id + "</td><td style = 'border-style: solid; border-color: red'>" + obj.records[1].name + "</td><td style = 'border-style: solid; border-color: red'>" + obj.records[1].age + "</td></tr>";
document.getElementById("infoContainer").innerHTML = result;
}
/* kedua fungsi HARUS dijalankan terpisah supaya koneksi Ajax menutup dulu */
{
var xhr = new XMLHttpRequest();
xhr.open("GET","http://localhost:9000/database.txt","true");
xhr.onreadystatechange = function(){ document.getElementById("jsonCapture").value = xhr.responseText; }
xhr.send(null);
}
function getData()
{
var obj = JSON.parse(document.getElementById("jsonCapture").value);
var result = "<table><tr><td style = 'border-style: solid; border-color: red'>" + obj.records[0].id + "</td><td style = 'border-style: solid; border-color: red'>" + obj.records[0].name + "</td><td style = 'border-style: solid; border-color: red'>" + obj.records[0].age + "</td></tr>";
result += "<tr><td style = 'border-style: solid; border-color: red'>" + obj.records[1].id + "</td><td style = 'border-style: solid; border-color: red'>" + obj.records[1].name + "</td><td style = 'border-style: solid; border-color: red'>" + obj.records[1].age + "</td></tr>";
document.getElementById("infoContainer").innerHTML = result;
}
/* kedua fungsi HARUS dijalankan terpisah supaya koneksi Ajax menutup dulu */
Selanjutnya ubah BODY sbb:
<body onload = "loadData()">
Lalu ubah BUTTON sbb:
<button onclick = "getData()">
Terakhir jalankan localhost server Anda dan arahkan web browser ke http://localhost:9000/
Catatan:
Teknik ini adalah hasil riset mengenai Ajax yang saya lakukan. Ajax secara native hanya mengembalikan teks dan XML. Namun pada beberapa server, mengakses JSON melalui Ajax tidak dibolehkan karena JSON merupakan object Javascript yang bisa mengandung script berbahaya. Oleh karena itu file JSON dijadikan teks sehingga isinya diabaikan oleh server. Tapi Ajax tidak bisa mengembalikan teks itu secara langsung sehingga harus melalui tag HIDDEN untuk menampung teks yang kemudian diakses oleh Javascript dan diubah menjadi JSON.
Nama server http://localhost:9000 itu adalah milik saya, milik Anda mungkin berbeda.
Nama server http://localhost:9000 itu adalah milik saya, milik Anda mungkin berbeda.
