Belajar Ajax tanpa jQuery (part2)

Kemarin kita udah sampai pada syntax untuk mengirim data ke server menggunakan open() dan send(). Tetapi, ada pilihan menggunakan method GET atau  POST. Jadi, kita menggunakan yang mana? Seperti kata favorit guru saya di sekolah, "timbul, pertanyaan."

GET ATAU POST?

Saya lebih merekomendasikan menggunakan GET, karena lebih sederhana dan cepat dibandingkan dengan POST. Selain itu, GET juga bisa digunakan dalam banyak kasus.

Meski begitu, lebih baik menggunakan POST ketika : 

• File cache bukanlah pilihan untuk digunakan (memperbarui file atau database di server)
• Mengirim data yang berukuran besar ke server (POST tidak memiliki keterbatasan ukuran)
• Mengirim input pengguna (yang dapat berisi karakter yang tidak diketahui), POST lebih kuat dan aman daripada GET

 MENGGUNAKAN GET

Contoh :

xmlhttp.open("GET","demo_get.php",true);
xmlhttp.send();

Dengan contoh di atas, mungkin kita akan mendapatkan hasil cache.
Untuk menghindariya, bisa ditambahkan ID unik ke URL seperti ini (saya sandiri kurang paham) :

xmlhttp.open("GET","demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

Kalau untuk mengirim informasi menggunakan GET, tambahkan informasi ke dalam URL.

xmlhttp.open("GET","demo_get2.php?nama=Bayu&alamat=Jateng",true);
xmlhttp.send();

MENGGUNAKAN POST

Contoh penggunaan POST yang sederhana.

xmlhttp.open("POST","demo_post.php",true);
xmlhttp.send();

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

xmlhttp.open("POST","ajax_test.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("nama=Henry&alamat=Jateng");

Penjelasan : 

setRequestHeader(header, value) = menambahkan HTTP Header pada pengiriman permintaan
header = spesifikasi nama header
value  = spesifikasi isi header

URL

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

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

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

 ASYNCHRONOUS

AJAX singkatan Asynchronous JavaScript dan XML, dan objek XMLHttpRequest agar berjalan sebagai AJAX, parameter async metode open () harus diatur ke benar: 

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

Mengirim permintaan asynchronous merupakan kemajuan besar dalam pengembangan web. Banyak tugas yang dilakukan pada server yang sangat memakan waktu. Sebelum AJAX, operasi ini bisa menyebabkan aplikasi menggantung atau berhenti.
 
Dengan AJAX, JavaScript tidak harus menunggu respon dari server, tetapi dapat:

• mengeksekusi script lain sambil menunggu respon dari server
• berurusan dengan respon ketika respon siap

ASYNC = TRUE

Bila menggunakan async = true, tentukan fungsi yang dieksekusi ketika respon siap dalam onreadystatechange: 

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById("teks").innerHTML=xmlhttp.responseText;
  }
}
  xmlhttp.open("GET","teks.txt",true);
  xmlhttp.send();

Untuk menggunakan async = false, cukup ubah parameter ketiga di method open().

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

  ASYNC = FALSE

Saya tidak meyarankan penggunaan async = false, tapi untuk request data yang kecil masih bisa digunakan.
Ingat bahwa JavaScript TIDAK akan mengeksekusi perintah sampai respon server siap. Jika server sibuk atau lambat, aplikasi akan hang atau berhenti.
Catatan: Bila Anda menggunakan async = false, jangan menulis fungsi onreadystatechange - cukup dengan menempatkan script send () pernyataan:

xmlhttp.open("GET","teks.txt",false); xmlhttp.send(); document.getElementById("teks").innerHTML=xmlhttp.responseText;
Sekian  dulu untuk hari ini, tunggu kelanjutannya besok.
 --------
Note : Hari ini gak ada contohnya yang bisa di download, tapi bisa menggunakan contoh yang kemarin sudah saya sertakan di part1.
sumber : www.w3schools.com