Lihat sumber Pengenalan AJAX untuk komunikasi asynchronous

==Modul: Pengenalan AJAX (Asynchronous JavaScript and XML)==

==Tujuan Pembelajaran==
* Mahasiswa memahami konsep komunikasi '''asynchronous''' antara '''frontend dan backend'''.
* Mahasiswa dapat mengirim permintaan (request) ke server tanpa me-refresh halaman.
* Mahasiswa mampu menjalankan dan menguji AJAX di Ubuntu menggunakan '''tools bawaan'''.

==1. 🧠 Apa Itu AJAX?==

'''AJAX''' memungkinkan halaman web untuk:
* Mengambil/mengirim data dari/ke server secara '''asynchronous'''.
* Tidak perlu '''reload seluruh halaman'''.
* Sangat berguna untuk membuat '''web interaktif dan cepat''' (misalnya search suggestion, live form check, dsb).

==2. 🔧 Tools di Ubuntu 24.04==

'''Text Editor'''
* '''Gedit''': GUI editor bawaan.
* '''Nano''': Terminal-based editor.

'''Server Lokal'''
* '''Python 3 HTTP server''' (bawaan Ubuntu):
  
 cd nama_folder
 python3 -m http.server 8000


==3. 📦 Struktur File Contoh==

 /ajax-demo
 │
 ├── index.html         ← halaman utama
 ├── data.json          ← file dummy dari “server”
 └── server.py          ← contoh server Python (opsional)

==4. 📄 Contoh AJAX Sederhana (GET data dari file JSON)==

'''`data.json`'''

 {
   "nama": "Dzaq Rayhan",
   "status": "Mahasiswa Web Programming"
 }

'''`index.html`'''

<pre>
 <!DOCTYPE html>
 <html>
 <head>
   <title>AJAX Demo</title>
 </head>
 <body>
   <h1>AJAX Demo - Ambil Data</h1>
   <button onclick="ambilData()">Ambil Data</button>
   <p id="output"></p>
 
   <script>
     function ambilData() {
       const xhr = new XMLHttpRequest();
       xhr.open("GET", "data.json", true);
 
       xhr.onload = function() {
         if (xhr.status === 200) {
           const data = JSON.parse(xhr.responseText);
           document.getElementById("output").innerText = `Nama: ${data.nama}, Status: ${data.status}`;
         } else {
           document.getElementById("output").innerText = "Gagal mengambil data!";
         }
       }; 
 
       xhr.send();
     }
   </script>
 </body>
 </html>
</pre>

'''🚀 Cara Menjalankan'''
* Simpan semua file ke dalam satu folder, misalnya `ajax-demo/`
* Buka terminal:
   
 cd ~/ajax-demo
 python3 -m http.server 8000

* Buka browser dan kunjungi:  

 http://localhost:8000

Klik tombol “Ambil Data” dan lihat data muncul tanpa reload!

==5. 💬 Contoh AJAX POST ke Server Dummy (menggunakan server.py)==

'''`index.html` (POST Form)'''

<pre>
 <!DOCTYPE html>
 <html>
 <head>
   <title>Form AJAX</title>
 </head>
 <body>
   <h2>AJAX POST Demo</h2>
   <input type="text" id="nama" placeholder="Nama">
   <button onclick="kirimData()">Kirim</button>
   <p id="hasil"></p>
 
   <script>
     function kirimData() {
       const nama = document.getElementById("nama").value;
       const xhr = new XMLHttpRequest();
       xhr.open("POST", "/kirim", true);
       xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); 
 
       xhr.onload = function () {
         document.getElementById("hasil").innerText = xhr.responseText;
       };
 
       xhr.send(JSON.stringify({ nama: nama }));
     }
   </script>
 </body>
 </html>
</pre>

'''`server.py` (Server Python Sederhana)'''

 from http.server import BaseHTTPRequestHandler, HTTPServer
 import json
 
 class Handler(BaseHTTPRequestHandler):
     def do_POST(self):
         if self.path == '/kirim':
             content_length = int(self.headers['Content-Length'])
             post_data = self.rfile.read(content_length)
             data = json.loads(post_data)
             nama = data.get('nama', 'Tidak ada nama')
             response = f"Halo, {nama}!"
             self.send_response(200)
             self.send_header('Content-type','text/plain')
             self.end_headers()
             self.wfile.write(response.encode())
 
 httpd = HTTPServer(('localhost', 8000), Handler)
 print("Server running at http://localhost:8000")
 httpd.serve_forever()

'''Cara jalankan server POST:'''

 python3 server.py


==📚 Tugas Mahasiswa==

* Buat form AJAX untuk:
** Mengambil list produk dari file JSON
** Menampilkan ke halaman tanpa reload
* Tambahkan tombol "Refresh Data"
* (Bonus) Buat form POST sederhana ke Python backend


==Pranala Menarik==

* [[Web Programming]]