jQuery Academy · Pelajaran

Konfigurasi Permintaan AJAX secara Efektif

Jelajahi opsi lengkap untuk .ajax(), termasuk tipe data, header, penyimpanan tembolok, dan batas waktu, guna menyempurnakan permintaan asinkron untuk berbagai skenario.

Pelajaran 1 dari 311 langkah

Konfigurasi Permintaan AJAX secara Efektif adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar jQuery Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus jQuery Academy mencakup 3 pelajaran total.

Maksimalkan Kekuatan .ajax()

Metode $.ajax() milik jQuery adalah pilihan utama Anda untuk membuat permintaan HTTP dengan kontrol penuh. Berbeda dari metode yang lebih sederhana seperti $.get() atau $.post(), $.ajax() memungkinkan Anda menyempurnakan setiap aspek permintaan.

Pelajaran ini membahas berbagai opsinya secara menyeluruh, mulai dari menetapkan tipe data hingga mengelola penyimpanan cache dan batas waktu, untuk membangun aplikasi asinkron yang tangguh dan efisien.

Struktur Dasar .ajax()

Pada dasarnya, $.ajax() menerima objek berisi pasangan kunci-nilai yang mewakili opsi konfigurasi. Permintaan paling sederhana hanya memerlukan url.

Berikut cara mengambil data dari API:

$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/1"
}).done(function(data) {
  console.log("Fetched data:", data.title);
});

URL dan Metode (type)

Opsi url menentukan titik akhir untuk permintaan Anda. Opsi type (atau method pada versi jQuery yang lebih baru) menentukan metode HTTP, seperti GET, POST, PUT, atau DELETE.

url: URL tujuan permintaan.
type: Metode HTTP (misalnya, "GET", "POST").

$.ajax({
  url: "/api/users",
  type: "POST"
});

Mengirim Data dengan `data`

Gunakan opsi data untuk mengirim informasi bersama permintaan Anda. Untuk permintaan GET, data ditambahkan ke URL sebagai parameter kueri. Untuk permintaan POST, data dikirim dalam isi permintaan.

Anda dapat meneruskan objek biasa, dan jQuery akan melakukan serialisasi untuk Anda.

$.ajax({
  url: "/api/save-item",
  type: "POST",
  data: {
    id: 123,
    name: "New Gadget"
  }
});

Respons yang Diharapkan: `dataType`

Opsi dataType memberi tahu jQuery jenis data yang Anda harapkan diterima dari server (misalnya, "json", "xml", "html", "text"). Opsi ini membantu jQuery mengurai respons dengan benar.

Jika tidak ditentukan, jQuery akan mencoba menyimpulkannya dari tipe MIME respons.

$.ajax({
  url: "/api/products",
  dataType: "json"
});

Header Kustom: `headers`

Opsi headers memungkinkan Anda menetapkan header HTTP kustom untuk permintaan. Opsi ini penting untuk tugas seperti autentikasi (misalnya, mengirim kunci API) atau menentukan tipe konten.

Teruskan sebuah objek yang kuncinya merupakan nama header dan nilainya merupakan isi header tersebut.

$.ajax({
  url: "/api/secure-data",
  headers: {
    "Authorization": "Bearer your_token",
    "X-Requested-With": "XMLHttpRequest"
  }
});

Mengontrol Penyimpanan Cache: `cache`

Peramban sering menyimpan permintaan GET dalam cache untuk mempercepat pemuatan berikutnya. Meskipun berguna, terkadang Anda memerlukan data terbaru setiap kali.

Atur cache: false untuk mencegah peramban menyimpan respons dalam cache, sehingga permintaan Anda always mengambil informasi terbaru dari server.

$.ajax({
  url: "/api/dynamic-content",
  cache: false
});

Batas Permintaan: `timeout`

Permintaan yang berjalan lama dapat menurunkan pengalaman pengguna. Opsi timeout memungkinkan Anda menentukan waktu maksimum (dalam milidetik) agar permintaan selesai.

Jika permintaan tidak selesai dalam waktu tersebut, permintaan akan dibatalkan dan memicu callback .fail().

$.ajax({
  url: "/api/slow-report",
  timeout: 8000 // 8 seconds
});

Langsung: Konfigurasi AJAX Tingkat Lanjut

Mari kita lihat contoh lengkap yang menggabungkan beberapa opsi $.ajax(). Permintaan ini mengambil sebuah item todo, menentukan JSON yang diharapkan, menambahkan header kustom, menonaktifkan cache, dan menetapkan batas waktu.

Cobalah menjalankannya untuk melihat bagaimana paragraf output diperbarui!

<!DOCTYPE html>
<html>
<head>
  <title>AJAX Config Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <h3>Check Console & Output:</h3>
  <p id="output">Fetching data...</p>
  <script>
    $(document).ready(function() {
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/todos/1",
        type: "GET",
        dataType: "json",
        headers: {
          "X-App-ID": "CoddyKit-Demo"
        },
        cache: false,
        timeout: 7000 // 7 seconds
      })
      .done(function(data) {
        $("#output").html(
          "<b>Todo fetched!</b><br>ID: " + data.id + 
          "<br>Title: " + data.title
        );
        console.log("Success:", data);
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        $("#output").html(
          "<b>Request failed!</b><br>Status: " + textStatus + 
          "<br>Error: " + errorThrown
        );
        console.error("Error:", textStatus, errorThrown);
      })
      .always(function() {
        console.log("Request completed.");
      });
    });
  </script>
</body>
</html>

Pemeriksaan Konfigurasi AJAX

Bayangkan Anda sedang membangun fitur untuk mengirim komentar pengguna baru ke /api/comments. Fitur ini harus menggunakan permintaan POST, menyertakan commentText dan userId, serta mengharapkan objek JSON sebagai respons. Selain itu, untuk memastikan komentar selalu terbaru, Anda ingin mencegah peramban menyimpan cache.

Manakah dari opsi $.ajax() berikut yang penting untuk skenario khusus ini?

Jawab di pelajaran interaktif

Rekap: Menguasai Konfigurasi AJAX

Anda telah menguasai cara mengonfigurasi metode $.ajax() milik jQuery!

Anda telah mempelajari cara menentukan url dan type HTTP.
Cara mengirim data menggunakan opsi data.
Menentukan format respons yang diharapkan dengan dataType.
Menambahkan headers HTTP kustom untuk berbagai kebutuhan tingkat lanjut.
Mengontrol penyimpanan cache peramban dengan cache.
Menetapkan batas untuk permintaan yang lambat menggunakan timeout.

Opsi-opsi andal ini memungkinkan Anda membangun interaksi asinkron yang sangat disesuaikan dan tepercaya dalam aplikasi web.

Gratis untuk memulai

Belajar JavaScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 22
Pelajaran: 48

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Konfigurasi Permintaan AJAX secara Efektif” gratis?

Ya — teks lengkap “Konfigurasi Permintaan AJAX secara Efektif” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus jQuery Academy, upgrade ke CoddyKit PRO. Kursus jQuery Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Konfigurasi Permintaan AJAX secara Efektif”?

Jelajahi opsi lengkap untuk .ajax(), termasuk tipe data, header, penyimpanan tembolok, dan batas waktu, guna menyempurnakan permintaan asinkron untuk berbagai skenario. Kamu berlatih jQuery Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai jQuery Academy?

Tidak diperlukan pengalaman sebelumnya. jQuery Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 3.

Berapa lama pelajaran “Konfigurasi Permintaan AJAX secara Efektif” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran jQuery Academy ini?

Ya. Setiap pelajaran jQuery Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Konfigurasi Permintaan AJAX secara Efektif
Menangani Kesalahan dan Keberhasilan AJAX
AJAX Lintas Domain (CORS/JSONP)

← Kembali ke jQuery Academy