Kursus Membuat Web

iklan

Onreadystatechange Event Ajax

Ketika permintaan ke server dikirim, beberapa tindakan yang dilakukan berdasarkan respon. Event onreadystatechange dipicu setiap kali perubahan readyState. Properti readyState menyandang status XMLHttpRequest.

Tiga sifat penting dari objek XMLHttpRequest :

Properti Keterangan
onreadystatechange fungsi (atau nama fungsi) dipanggil secara otomatis setiap kali perubahan properti readyState
readyState Status XMLHttpRequest. Perubahan dari 0 sampai 4:
0: permintaan tidak diinisialisasi
1: koneksi ke server
2: permintaan diterima
3: memproses permintaan
4: request selesai dan respon siap
status 200: "OK"
404: Halaman tidak ditemukan

Dalam event onreadystatechange, kita tentukan apa yang akan terjadi ketika respon server sudah siap untuk diproses. Ketika readyState adalah 4 dan status adalah 200, respon siap :

Script HTML : onreadystatechange.html
<!DOCTYPE html>
<html>
	<head>
		<title>Contoh Ajax</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>
File : ajax_info.txt
AJAX is not a new programming language.AJAX is a technique  for creating fast and dynamic web pages.
Lihat ...

Event onreadystatechange dipicu lima kali (0-4), satu kali untuk setiap perubahan dalam readyState.

Menggunakan Fungsi Callback

Sebuah fungsi callback adalah fungsi sebagai parameter ke fungsi lain. Jika Anda memiliki lebih dari satu tugas AJAX di website Anda, Anda harus membuat satu fungsi standar untuk menciptakan objek XMLHttpRequest, dan memanggilnya untuk setiap tugas AJAX. Fungsi harus berisi URL dan apa yang harus dilakukan pada onreadystatechange (yang mungkin berbeda untuk setiap panggilan) :

Script HTML : callback.html
<!DOCTYPE html>
<html>
	<head>
		<title>Contoh Ajax</title>
		<meta  charset="UTF-8">
			<script>
			var xmlhttp;
			function loadXMLDoc(url,cfunc){
			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=cfunc;
			xmlhttp.open("GET",url,true);
			xmlhttp.send();
			}
			function myFunction()
			{
			loadXMLDoc("ajax_info.txt",function()
			{
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
			}
			});
			}
			</script>
</head>
<body>
	<div id="myDiv"><h2>Let AJAX change this text</h2></div>
	<button type="button" onClick="myFunction()">Change Content</button>
</body>
</html>
File : ajax_info.txt
AJAX is not a new programming language.AJAX is a technique  for creating fast and dynamic web pages.
				  

Lihat ...

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