Selamat malam para pengunjung setia blog ini, dalam kesempatan yang berbahagia kali ini saya akan kembali menulis sebuah artikel pada kategori "java script" dan berkaitan juga dengan kategori "php", artikel ini saya beri judul "Mengirim Nilai Menggunakan AJAX Dengan Metode GET". Dari judulnya dapat diketahui kali ini saya akan membuat sebuah program aplikasi yang mengirim data melalui AJAX yang kemudian akan diproses oleh kode php, jika biasanya menggunakan tag form dan kemudian menekan tombol submit untuk mengirim nilai pada php, tetapi kali ini kita menggunakan metode AJAX, untuk mengetahui penjelasan lebih lanjut mengenai AJAX silahkan teman – teman mencari informasinya sendiri di internet, ok untuk lebih jelasnya silahkan ikuti langkah – langkah berikut ini:
Langkah pertama buka editor teks favoritmu saya sendiri menggunakan Codelobster PHP Edition, kemudian buatlah sebuah dokumen .html baru
Ketikan kode dibawah ini:
<!DOCTYPE HTML>
<html>
<head>
<title>Mengirim Nilai Menggunakan AJAX Dengan Metode GET</title>
<script type="text/javascript">
/* Buat variabel global */
var myAjax;
/* Koneksi ajax ke web browser */
function ajax() {
if(window.XMLHttpRequest) {
return new XMLHttpRequest();
}
if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
function kirim() {
/* Mengambil nilai yang terdapat pada input text dengan id text */
text = document.getElementById("text").value;
/* Mengirim nilai ke proses.php dengan metode get */
/* Dan memeriksa hasil nilai balik pada fungsi prosesKirim */
myAjax = ajax();
myAjax.onreadystatechange = prosesKirim;
myAjax.open("GET", "proses.php?text="+text, true);
myAjax.send(null);
}
/* Fungsi untuk mengetahui hasil nilai balik dari proses */
/* Jika hasil berupa nilai 4 yakni proses sukses */
function prosesKirim() {
if(myAjax.readyState == 4) {
alert(myAjax.responseText);
}
}
</script>
</head>
<body>
<h1>Mengirim Nilai Menggunakan AJAX Dengan Metode GET</h1>
<!-- Membuat input text dan deklarasi atribut id dengan nilai text -->
<input type="text" id="text"/>
<!-- Memanggil fungsi kirim() melalui atribut event onclick() -->
<input type="button" value="Tampil" onclick="kirim()"/>
</body>
</html>
Simpan dokumen tersebut dengan nama "index.html"
Langkah selanjutnya buatlah sebuah dokumen .php baru, kemudian lanjutkan dengan mengetikan kode dibawah ini:
<?php echo $_GET['text'].", Dikirim melalui metode AJAX"; ?>
Simpan dokumen diatas dengan nama "proses.php", simpanlah dokumen tersebut pada folder yang sama dengan dokumen "index.html" yang sebelumnya dibuat
Kemudian coba akses file "index.html" melalui web browser, jika berhasil hasilnya akan seperti gambar dibawah ini:
Gambar : tampilan hasil akhir program
Ingat dalam mengujinya web server (apache) harus sudah berjalan, karena di dalam program diatas terdapat menggunakan kode program php
Demikian artikel saya yang sederhana kali ini, AJAX sangat berguna dalam mengirimkan data secara background process atau proses dibelakang layar, sederhananya halaman web tidak di-reload dalam mengirimkan nilai ataupun perintah nantinya, tunggu artikel – artikel saya yang selanjutnya, jika ada pertanyaan silahkan tinggalkan lewat komentar.
0 Comments:
Post a Comment