mekanisme mengkoneksikan javascript ke backend (fake-server) menggunakan metode AJAX
Seperti artikel sebelumnya kal ini kita akan mengkoneksikan Javascript kita ke fake-server menggunakan AJAX. Siapkan VSC dan tentu saja fake-servernya.
- siapkan file .json nya kali ini isi jsonnya yaitu data mahasiswa
{
"mahasiswa": [
{
"nim": "123",
"nama": "Budi",
"jurusan": "RPL"
},
{
"nim": "234",
"nama": "Wati",
"jurusan": "TKJ"
},
{
"nim": "345",
"nama": "Andi",
"jurusan": "RPL"
}
]
}setelah itu jalankan file .jsonnya memalui cmd.
seletah itu bikin file .html nya
<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>isi file tersebut yaitu jika kita mengklik tampilkan data mahasiswa maka akan muncul isi dari file.jsonnya
Komentar
Posting Komentar