Kursus Membuat Web

iklan

Contoh Ajax Sederhana

Untuk memahami bagaimana AJAX bekerja, kita akan membuat sebuah aplikasi AJAX :

Source Code

Script HTML : contoh_ajax_sederhana.html
<!DOCTYPE html>
<html>
	<head>
		<title>Contoh Ajax Sederhana</title>
		<meta  charset="UTF-8">
			<script>
				function loadXMLDoc()
				{
				var xmlhttp;
				if (window.XMLHttpRequest)
				{// code for IE7+, Firefox, Chrome, Opera, Safari
				xmlhttp=new XMLHttpRequest();
				}
				else
				{// code for IE6, IE5
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange=function()
				{
				if (xmlhttp.readyState==4 && xmlhttp.status==200)
				{
				document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
				}
				}
				xmlhttp.open("GET","ajax_info.txt",true);
				xmlhttp.send();
				}
		</script>
	</head>
	<body>
		<div id="myDiv"><h2>Let AJAX change this text</h2></div>
		<button type="button" onClick="loadXMLDoc()">Change Content</button>
	</body>
</html>

Selanjutnya buatlah file ajax_info.txt seperti di bawah ini !

File : ajax_info.txt
AJAX is not a new programming language.AJAX is a technique  for creating fast and dynamic web pages.
Lihat ...

Penjelasan Source Code.

<body>
	<div id="myDiv"><h2>Let AJAX change  this text</h2></div>
	<button type="button"  onclick="loadXMLDoc()">Change Content</button>
</body>

Aplikasi AJAX di atas mengandung satu bagian “div” dan satu “tombol”. Bagian “div” akan digunakan untuk menampilkan informasi kembalian dari server.  jika “Tombol” diklick, maka akan memanggil fungsi bernama loadXMLDoc().

<head>
	<script>
	    function loadXMLDoc()
	    {
		    Ajax Script ...
	    }
	</script>
</head>

Selanjutnya, tambahkan tag <script> ke bagian “head”. Bagian Script berisi fungsi loadXMLDoc()

tutorial berikutnya akan menjelaskan bagaimana AJAX bekerja.

Sebelumnya ...   Berikutnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015