DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

Tutorial Lengkap Belajar Javascript # Belajar Membuat Ajax

advertisement
Belajar Membuat Ajax


Ketika kita hendak memperbaharui tampilan halaman web maka yang biasa kita lakukan adalah mereload halaman tersebut.
Namun bagaimana caranya jika kita ingin memperbaharuinya tanpa perlu mereload?
Ini bisa kita lakukan dengan bantuan fungsi yang bernama ajax.
Itulah yang akan kita bahas pada tutorial kali ini.
Sebelumnya kita sudah belajar cara membuat json. Json dan ajax erat kaitannya dalam bahasa pemrograman javascript pada web application.
Apa sih sebenarnya ajax itu?
Yuk kita langsung saja ke tutorialnya.

Apa itu ajax?

Ajax atau asynchronous javascript and xml adalah sebuah fungsi javascript yang bisa kita gunakan untuk untuk melakukan http request ke server dengan menggunakan javascript. 
Ajax akan mengambil dan mengirim data secara asynchronous. 
Belajar Membuat Ajax


Selain itu ajax juga terkadang digunakan untuk membuat aplikasi yang menginginkan data secara realtime. 
Walaupun ada embel-emebl xml pada nama ajax, data yang bisa di handle tidak hanya berupa xml tapi juga bisa berupa json, html, teks dan lain sebagainya.

Cara membuat ajax

Ada beberapa cara yang bisa kita lakukan dalam membuat ajax. 
Namun disini kita akan belajar cara membuatnya menggunakan native javascript karena kita sedang belajar javascript native.
Untuk mempermudah tutorial, disini kita akan menggunakan api service dari reqres.in, sebuah website yang bisa kita gunakan untuk menguji aplikasi disisi frontend.
contoh link seperti berikut
https://reqres.in/api/users?page=2
Jika kita akses link diatas maka akan ada data  berupa json
Kita akan mencoba mengambil data json tersebut dan menampilkannya di halaman web kita dengan bantuan ajax.
Untuk membuat fungsi ajax dengan javascript native kita bisa menggunakan fungsi XMLHttpRequest() kemudian membuat intance objeknya. 
Strukturnya seperti berikut. 
Belajar Membuat Ajax
Sekarang kita coba membuat fungsi ajax sederhana untuk menampilkan data json dari request.in, Berikut contoh kode,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
   </head>
   <body>
	<script>
	var xhr = new XMLHttpRequest();
	xhr.open("GET", "https://reqres.in/api/users?page=2");
	xhr.send();
	xhr.addEventListener("load", () => {
	  document.write(xhr.responseText);
	});
	</script>
   </body>
</html>
Hasilnya
Belajar Membuat Ajax
Intinya kita mencoba menampilkan data dari URL lain ke halaman web kita dan proses load datanya dilakukan di thread baru.
Maksudnya gimana?
Jadi ketika sebuah proses dilakukan misalnya di thread B, proses di thread A tidak akan menunggu sampai proses di thread B selesai dan inilah yang dinamakan asyncrounous.
Untuk lebih jelasanya perhatikan kode berikut
var xhr = new XMLHttpRequest();
	xhr.open("GET", "https://reqres.in/api/users?page=2");
	xhr.send();
	xhr.addEventListener("load", () => {
	  setTimeout(function() {
	      document.write(xhr.responseText);
	   }, 1500);//jeda selama 1.5 detik
	});
document.write("Tunggu 1.5 detik");
Hasilnya


Jika kita perhatin, kode document.write("Tunggu 1.5 detik") berada di bawah document.write(document.write(xhr.responseText)) tapi yang dulu di kerjakan adalah kode document.write("Tunggu 1.5 detik"), itu karena kode document.write("Tunggu 1.5 detik") berada di thread utama sedangkan document.write(document.write(xhr.responseText)) dikerjakan di thread baru dimana prosesnya di jeda selam 1.5 detik.
Sampai disni semoga teman-teman paham apa itu asyncrounous

Sekarang kita coba menampilkan data json tersebut kedalam bentuk tabel html.
Kodenya seperti berikut
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
   </head>
   <body>
   <table border="1" width="100%">
   <thead>
   <tr>
      <td>ID</td>
      <td>Email</td>
      <td>First Name</td>
      <td>Last Name</td>
      <td>Avatar</td>
   </tr>
   </thead>
   <tbody id="tbody">
   </tbody>
   </table>
	<script>
	var xhr = new XMLHttpRequest();
	xhr.open("GET", "https://reqres.in/api/users?page=2");
	xhr.send();
	xhr.addEventListener("load", () => {
	  showJsonToTabel(xhr.responseText);
	});
	function showJsonToTabel(json)
	{
	  var obj = JSON.parse(json);
	  obj.data.forEach(cetak);
	  function cetak(item)
	  {
	     var tr = "<tr><td>"+ item.id +"</td><td>"+ item.email +"</td><td>"+ item.first_name +"</td><td>"+ item.last_name +"</td><td><img src='"+ item.avatar +"'/></td></tr>";
         document.getElementById("tbody").innerHTML += tr;
	  }
	}
	
	</script>
   </body>
</html>
Hasilnya,
Belajar Membuat Ajax

Itu tadi cara mengambil data dari url lain menggunakan ajax.
Trus bagaimana jika kita ingin melakukan hal sebaliknya yaitu mengirim data keserver.
Caranya mudah, kita tinggal mengganti metodenya menjadi post dan menaruh data yang ingin kita kirim di fungsi send. Kita juga akan mengatur setRequestHeader, karena data yang kita kirim berupa json maka header type content nya juga harus berupa json.
Berikut link dari request.in untuk mengirim data dengan metode post
https://reqres.in/api/users
Dan kode ajax javascriptnya seperti berikut
var xhr = new XMLHttpRequest();
var obj = {name: "morpheus",job: "leader"};
var jsonData =JSON.stringify(obj);
xhr.open("POST", "https://reqres.in/api/users");
xhr.setRequestHeader("Content-Type", "application/json");//mengatur header type
xhr.send(jsonData);
xhr.addEventListener("load", () => {
   if (xhr.status === 200 && xhr.responseText !== newName) {
      alert("Sukses terkirim");
   }
   else if (xhr.status !== 200) {
      alert("Gagal terkirim");
   }
});
Sampai disini tutorial pengenalan dan cara membuat ajax dengan javascript native.
Jika ada hal yang ingin ditanyakan terkait pembahasan silahkan tulis dikolom komentar.
Silahkan klik tombol share jika merasa artikel ini bermanfaat.
Good luck!

Penjelasan: 
  1. Frontend adalah bagian dari sistem yang bisa dilihat langsung oleh user yaitu berupa userinterface.
  2. Http Request adalah sebuah permintaan data dari client ke server menggunakan http protocol.
  3. Native adalah syntax atau kode asli dari sebuah bahasa pemrograman yang belum di modifikasi
  4. API (Application Programming Interface) adalah cara untuk mengintegrasikan dua bagian dari aplikasi atau dengan aplikasi yang berbeda secara bersamaan.
  5. Asyncrounous adalah proses yang dilakukan dithread baru sehingga tidak memblok proses yang ada diutama.
advertisement



0 Komentar untuk " Tutorial Lengkap Belajar Javascript # Belajar Membuat Ajax"

Silahkan berkomentar dengan baik dan bijak!