Apa itu Ajax dan Bagaimana Cara Menggunakannya

Di dalam dunia programing berbasis web ajax merupakan pemrograman yang sangat penting, karena untuk menciptakan aplikasi web yang interaktif, jadi menurut sumber wikipedia apa itu ajax dan bagaimana cara menggunakannya, ajax adalah kepanjangan dari Asynchronous JavaScript and XMLHTTP, dan bertujuan untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability.

Jadi sudah ada sedikit gambaran ya, apa itu ajax dan bagaimana cara menggunakannya jadi jika sebelumnya teman-teman sudah pernah belajar yang namanya jquery, pasti pernah membuat sebuah tombol button edit, hapus, dan insert dimana ketika kita melakukan salah satu tersebut kita akan mendapatkan efeknya, dan tetapi ketika kita refresh browsernya, maka tampilan itu akan kembali seperti semula, betul.

kenapa bisa seperti itu, itu di karenakan jquery hanya membuat efek, ibarat HTML dan CSS saja seperti itu, dan untuk proses pertukaran data kita serahkan kepada PHP dan Ajax nya, bagaimana sudah paham ya, jadi disini saya akan menggunakan ajax jquery ya. dimana cara menggunakannya ada 4 method yaitu:

1. load()
2. get()
3. post()
4. ajax()

dan di sini kita akan coba menggunakan metode yang load ya. bagaimana cara menggunakannya seperti ini:

silahkan teman-teman buat fille dengan nama index.php dan isikan seperti ini:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
	<div class="container">
	<div class="row">
		<div class="col-md-12">
			<div class="alert alert-primary mt-2 text-center">
				Contoh penggunaan metode load ajax jquery
			</div>
			<button class="btn btn-warning">Tampil</button>
			<h4>Hasil load:</h4>
			<div id="demo"></div>
		</div>	
	</div>
	</div>
	<script type="text/javascript" src="../jquery.js"></script>
	<script type="text/javascript">
		$("button").click(function(){
				$("#demo").load('data.php')
			setTimeout(function(){
				$("#demo").empty()
			},3000)
		})		
	</script>
</body>
</html>

kemudian kita buat file satu lagi dengan nama data.php untuk menampung datanya, dan silahkan isi seperti ini:

<h5>robbani</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Sebnarnya untuk isi di data.php itu seterah ya, teman-teman bisa isikan apa saja, oke dan sekarang kita lihat hasilnya:

setelah di tekan tombol tampil

silahkan teman-teman coba sendiri, ketika teman-teman tekan tombol loadnya, apakah browser akan mereload .!

cukup simple ya, dan saya rasa cukup sampai disini belajar kita tentang apa itu ajax dan bagaimana cara menggunakannya, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.