Kursus Membuat Web

iklan

Mengirim Request Ke Server Ajax

Objek XMLHttpRequest digunakan untuk bertukar data dengan server.

Untuk mengirim permintaan ke server, kita menggunakan metode open () dan send () dari objek XMLHttpRequest:

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
Method Keterangan
open(method,url,async)

Menentukan jenis request, URL, dan apakah request tersebut harus ditangani asynchronously atau tidak.

Method: jenis permintaan GET atau POST
url: lokasi file di server
async: true (asynchronous) atau false (synchronous)
send(string) Mengirim request ke server.
string: Hanya digunakan untuk request POST

GET atau POST

GET adalah lebih sederhana dan lebih cepat dari pada POST, dan dapat digunakan dalam banyak kasus. Namun, selalu menggunakan request POST ketika:

  • Sebuah file cache bukanlah pilihan (memperbarui file atau database di server)
  • Mengirim data dalam jumlah besar ke server (POST tidak memiliki keterbatasan ukuran)
  • Mengirim input pengguna (yang dapat berisi karakter tidak dikenal), POST adalah lebih kuat dan aman dari pada GET

GET Request

Script HTML : get-demo.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","get-demo.php",true);
	  xmlhttp.send();
	  }
	</script>
  </head>
  <body>
	<h2>AJAX</h2>
	<button type="button" onClick="loadXMLDoc()">Request data</button>
	<div id="myDiv"></div>
  </body>
  </html>
Script PHP : get-demo.php
<?php
	$tanggaldanjam=date("Y-m-d H:i:s");
	echo "This content was requested using the GET method.<br />";
	echo "Requested at: $tanggaldanjam";
?>
Lihat ...

Jika Anda ingin mengirim informasi dengan metode GET, tambahkan informasi ke URL :

Script HTML : get-demo2.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","get-demo2.php?fname=Henry&lname=Ford",true);
			xmlhttp.send();
			}
		</script>
	</head>
	<body>
		<h2>AJAX</h2>
		<button type="button" onClick="loadXMLDoc()">Request data</button>
		<div id="myDiv"></div>
	</body>
</html>
Script PHP : get-demo2.php
<?php
	$namadepan=$_GET['fname'];
	$namabelakang=$_GET['lname'];
	echo "Hello $namadepan $namabelakang";
?>
Lihat ...

POST Request

Contoh POST  request sederhana :

Script HTML : post-demo.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("POST","post-demo.php",true);
			xmlhttp.send();
			}
			</script>
</head>
<body>
	<h2>AJAX</h2>
	<button type="button" onClick="loadXMLDoc()">Request data</button>
	<div id="myDiv"></div>
</body>
</html>
Script PHP : post-demo.php
<?php
	$tanggaldanjam=date("Y-m-d H:i:s");
	echo "This content was requested using the POST method.<br />";
	echo "Requested at: $tanggaldanjam";
?>
Lihat ...

Untuk POST data menggunakan form HTML, tambahkan sebuah HTTP header dengan setRequestHeader(). Tentukan data yang ingin Anda kirim di method send() :

Script HTML : post-demo2.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("POST","post-demo2.php",true);
				xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
				xmlhttp.send("fname=Henry&lname=Ford");
				}
			</script>
</head>
<body>
	<h2>AJAX</h2>
	<button type="button" onClick="loadXMLDoc()">Request data</button>
	<div id="myDiv"></div>
</body>
</html>
Script PHP : post-demo2.php
<?php
	$namadepan=$_POST['fname'];
	$namabelakang=$_POST['lname'];
	echo "Hello $namadepan $namabelakang";
?>

Lihat ...

Method Keterangan
setRequestHeader(header,value) Menambahkan header HTTP request.
Header: menentukan nama header
Nilai: menentukan nilai header

URL – File berada di Server

Parameter url dari method open(), adalah sebuah alamat ke file di server :

xmlhttp.open("GET","ajax_test.php",true);

File dapat berupa jenis file, seperti txt dan xml, atau file server scripting seperti asp dan php (yang dapat melakukan tindakan pada server sebelum mengirim respon kembali).

Asynchronous - True atau False ?

AJAX singkatan Asynchronous JavaScript dan XML, agar objek XMLHttpRequest berperilaku sebagai AJAX, parameter async dari method open() harus diset ke true :

xmlhttp.open("GET","ajax_test.php",true);

Mengirim request asynchronous adalah perbaikan besar bagi para pengembang web. Banyak tugas yang dilakukan pada server yang sangat memakan waktu. Sebelum AJAX, operasi ini dapat menyebabkan aplikasi hang atau berhenti. Dengan AJAX, JavaScript tidak harus menunggu respon server, tetapi dapat :

  • mengeksekusi skrip lain sambil menunggu respon server
  • berurusan dengan tanggapan ketika respon siap

Async=true

Bila menggunakan async = true, menetapkan fungsi untuk mengeksekusi ketika respon siap dalam event onreadystatechange :

Script HTML : async-true.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 ...

Anda akan belajar lebih banyak tentang onreadystatechange pada tutorial berikutnya.

Async=false

Untuk menggunakan async = false, ubah parameter ketiga dalam method open() ke false :

xmlhttp.open("GET","ajax_info.txt",false);

Menggunakan async = false tidak dianjurkan, tapi untuk permintaan kecil ini bisa. Ingat bahwa JavaScript TIDAK akan melanjutkan mengeksekusi, sampai tanggapan server sudah siap. Jika server sibuk atau lambat, aplikasi akan hang atau berhenti.

Catatan: Bila Anda menggunakan async = false, jangan menulis fungsi onreadystatechange, tempatkan kode setelah pernyataan send() :

Script HTML : async-false.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.open("GET","ajax_info.txt",false);
				xmlhttp.send();
				document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
				}
			</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 ...

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