Tutorial / Cara mengambil data tanpa reload dengan Ajax - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Tutorial / Cara mengambil data tanpa reload dengan Ajax, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel AJAX,
Artikel php, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Tutorial / Cara mengambil data tanpa reload dengan Ajax
link : Tutorial / Cara mengambil data tanpa reload dengan Ajax
Dapat dikatakan, kata kunci dari Ajax adalah pemrosesan tanpa reload (refresh). Artinya, pemrosesan yang lazimnya melibatkan reloading dapat dilakukan tanpa perlu me-reload halama web. Konsep pemrosesan tanpa reload inilah yang merupakan salah satu fitur menarik untuk diimplementasikan.
Sekedar ilustrasi, bagian ini akan menjelaskan pengambilan data dari file kemudian menampilkannya ke browser dengan tanpa reloading. Berikut ini kode Javascript yang kita beri nama test.js
Langkah selanjutnya adalah mengimplementasikan kode di atas pada dokumen HTML
Perlu sekali diperhatikan, keberadaan elemen <div> dengan atribut id bernilai target memiliki arti penting guna mendukung keberhasilan aplikasi, Singkatnya, di elemen inilah nantinya hasil request atau respon dari server akan kita letakkan. Sebagai tambahan, sebelum anda menguji kode di atas, pastikan anda sudah menyiapkan file bernama test.txt di direktori yang sama
Untuk file lengkap atau source code nya berikut design dari tampilannya bisa anda download Disini
Anda sekarang membaca artikel Tutorial / Cara mengambil data tanpa reload dengan Ajax dengan alamat link https://dev-create.blogspot.com/2021/12/tutorial-cara-mengambil-data-tanpa.html
Judul : Tutorial / Cara mengambil data tanpa reload dengan Ajax
link : Tutorial / Cara mengambil data tanpa reload dengan Ajax
Tutorial / Cara mengambil data tanpa reload dengan Ajax
Dapat dikatakan, kata kunci dari Ajax adalah pemrosesan tanpa reload (refresh). Artinya, pemrosesan yang lazimnya melibatkan reloading dapat dilakukan tanpa perlu me-reload halama web. Konsep pemrosesan tanpa reload inilah yang merupakan salah satu fitur menarik untuk diimplementasikan.
Sekedar ilustrasi, bagian ini akan menjelaskan pengambilan data dari file kemudian menampilkannya ke browser dengan tanpa reloading. Berikut ini kode Javascript yang kita beri nama test.js
var xmlHttp = createXmlHttpRequest();
var obj = '';
function createXmlHttpRequest() {
var xmlHttp = false;
if (window.ActivateXObject) {
xmlHttp = new ActivateXObject("Microsoft.XMLHTTP");
} else {
xmlHttp = new XMLHttpRequest();
}
if(!xmlHttp) {
alert("Gagal Menciptakan objek");
}
return xmlHttp;
}
function getData(source, divID) {
if(xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
obj = divID;
xmlHttp.open("GET", source);
xmlHttp.onreadystatechange = handleRespon;
xmlHttp.send(null);
} else {
setTimeout('getData(source, divID)', 1000);
}
}
function handleRespon() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
document.getElementById(obj).innerHTML = xmlHttp.responseText;
} else {
alert("Error: " + xmlHttp.statusText);
}
}
}
var obj = '';
function createXmlHttpRequest() {
var xmlHttp = false;
if (window.ActivateXObject) {
xmlHttp = new ActivateXObject("Microsoft.XMLHTTP");
} else {
xmlHttp = new XMLHttpRequest();
}
if(!xmlHttp) {
alert("Gagal Menciptakan objek");
}
return xmlHttp;
}
function getData(source, divID) {
if(xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
obj = divID;
xmlHttp.open("GET", source);
xmlHttp.onreadystatechange = handleRespon;
xmlHttp.send(null);
} else {
setTimeout('getData(source, divID)', 1000);
}
}
function handleRespon() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
document.getElementById(obj).innerHTML = xmlHttp.responseText;
} else {
alert("Error: " + xmlHttp.statusText);
}
}
}
Langkah selanjutnya adalah mengimplementasikan kode di atas pada dokumen HTML
<html>
<head>
<script type='text/javascript' src='test.js'></script>
</head>
<body>
<form>
<input type='button' value='Get Data' onclick="getData('test.txt', 'target')">
</form>
<!-- untuk menampilkan hasil -->
<div id='target'>
<p>Data Akan ditampilkan disini</p>
</div>
</body>
<head>
<script type='text/javascript' src='test.js'></script>
</head>
<body>
<form>
<input type='button' value='Get Data' onclick="getData('test.txt', 'target')">
</form>
<!-- untuk menampilkan hasil -->
<div id='target'>
<p>Data Akan ditampilkan disini</p>
</div>
</body>
Perlu sekali diperhatikan, keberadaan elemen <div> dengan atribut id bernilai target memiliki arti penting guna mendukung keberhasilan aplikasi, Singkatnya, di elemen inilah nantinya hasil request atau respon dari server akan kita letakkan. Sebagai tambahan, sebelum anda menguji kode di atas, pastikan anda sudah menyiapkan file bernama test.txt di direktori yang sama
Untuk file lengkap atau source code nya berikut design dari tampilannya bisa anda download Disini
Demikianlah Artikel Tutorial / Cara mengambil data tanpa reload dengan Ajax
Sekianlah artikel Tutorial / Cara mengambil data tanpa reload dengan Ajax kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Tutorial / Cara mengambil data tanpa reload dengan Ajax dengan alamat link https://dev-create.blogspot.com/2021/12/tutorial-cara-mengambil-data-tanpa.html
