Mekanisme mengkoneksikan javascript ke backend (fake-server) menggunakan metode AJAX
Haiiiii.... kali ini saya akan membahas bagaimana cara mengoneksikan javascript ke fake server menggunakan AJAX
Langsung saja simak penjelasannya :D
Langkah pertama kita buat folder terlebih dahulu, disini foldernya saya beri nama json-server
Kemudian buat file baru lagi dengan nama mahasiswa.html dengan script sebagai berikut
<html>
<head>
<title>Belajar AJAX</title>
<script lang="javascript">
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
function sndReq() {
http.open('get', 'http://localhost:3000/mahasiswa');
http.onreadystatechange = handleResponse;
http.setRequestHeader("Content-Type","application/json");
http.setRequestHeader("Access-Control-Allow-Origin","*");
http.setRequestHeader("Access-Control-Allow-Method","GET");
http.setRequestHeader("Pragma","no-cache");
http.setRequestHeader("Cache-Control","no-cache");
http.send(null);
}
function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
var datajson = JSON.parse(response);
var tbl = '<table border="1">';
tbl += '<tr><td>No</td><td>NIM</td><td>Nama</td><td>Jurusan</td></tr>';
for(var i = 0; i < datajson.length; i++){
tbl += '<tr><td>'+i+'</td><td>'+datajson[i]['nim']+'</td><td>'+
datajson[i]['nama']+'</td><td>'+datajson[i]['jurusan']+'</td></tr>';
}
tbl += '</table>';
document.getElementById('foo').innerHTML = tbl;
}
}
</script>
</head>
<body>
<a href="javascript:sndReq()">Tampilkan Data Mahasiswa</a>
<div id="foo">
</div>
</body>
</html>
Untuk menjalankanya buka terlebih dahulu di terminal sesuai lokasi file. Sampai muncul alamat portnya http://localhost:3000/mahasiswa
Lalu panggil program tersebut dengan command Prompt
Kemudian pada CMD ketikkan lagi seperti dibawah ini
Berikut ini gambar full cmd-nya:
Kemudian alamat http://localhost:3000/mahasiswa buka pada bwoser, dan muncullah hasilnya seperti berikut :
Sekian penjelasan dari saya
Selamat mencoba semoga membantu, Terimakasih :D
Komentar
Posting Komentar