Belajar Ajax tanpa jQuery (part2) - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Belajar Ajax tanpa jQuery (part2), kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel jQuery, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Belajar Ajax tanpa jQuery (part2)
link : Belajar Ajax tanpa jQuery (part2)

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 

Demikianlah Artikel Belajar Ajax tanpa jQuery (part2)

Sekianlah artikel Belajar Ajax tanpa jQuery (part2) kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Belajar Ajax tanpa jQuery (part2) dengan alamat link https://dev-create.blogspot.com/2023/08/belajar-ajax-tanpa-jquery-part2.html