jQuery Academy · Ders

AJAX İsteklerini Etkili Şekilde Yapılandırma

Eşzamansız isteklerinizi farklı senaryolara göre ince ayarlamak için .ajax() yönteminin veri türleri, üst bilgiler, önbelleğe alma ve zaman aşımı gibi kapsamlı seçeneklerini keşfedin.

AJAX İsteklerini Etkili Şekilde Yapılandırma, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 3 dersten oluşur.

.ajax() Gücünü Ortaya Çıkarın

jQuery'nin $.ajax() yöntemi, HTTP istekleri yapmak için tam kontrol sağlayan başlıca aracınızdır. $.get() veya $.post() gibi daha basit yöntemlerin aksine $.ajax(), isteğinizin her yönünü hassas biçimde ayarlamanıza olanak tanır.

Bu derste, veri türlerini ayarlamaktan önbelleğe alma ve zaman aşımını yönetmeye kadar kapsamlı seçenekleri inceleyerek sağlam ve verimli eşzamansız uygulamalar oluşturacağız.

Temel .ajax() Yapısı

Temel olarak $.ajax(), yapılandırma seçeneklerini temsil eden anahtar-değer çiftlerinden oluşan bir nesne alır. En temel istek için yalnızca bir url gerekir.

Bir API'den verileri şu şekilde alabilirsiniz:

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

URL ve Yöntem (type)

url seçeneği isteğinizin uç noktasını belirtir. type seçeneği (veya daha yeni jQuery sürümlerindeki method) GET, POST, PUT ya da DELETE gibi HTTP yöntemini tanımlar.

url: İstek için hedef URL.
type: HTTP yöntemi (ör. "GET", "POST").

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

`data` ile Veri Gönderme

İsteğinizle birlikte bilgi göndermek için data seçeneğini kullanın. GET isteklerinde veriler sorgu parametreleri olarak URL'nin sonuna eklenir. POST isteklerinde ise istek gövdesiyle gönderilir.

Düz bir nesne sağlayabilirsiniz; jQuery bu nesneyi sizin için serileştirir.

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

Beklenen Yanıt: `dataType`

dataType seçeneği, sunucudan ne tür bir veri beklediğinizi jQuery'ye bildirir (ör. "json", "xml", "html", "text"). Bu, jQuery'nin yanıtı doğru şekilde ayrıştırmasına yardımcı olur.

Belirtilmezse jQuery, yanıtın MIME türünden bunu çıkarmaya çalışır.

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

Özel Üst Bilgiler: `headers`

headers seçeneği, isteğiniz için özel HTTP üst bilgileri ayarlamanıza olanak tanır. Bu seçenek, kimlik doğrulama (ör. API anahtarı gönderme) veya içerik türlerini belirtme gibi görevler için çok önemlidir.

Anahtarları üst bilgi adları, değerleri ise içerikleri olan bir nesne sağlayın.

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

Önbelleğe Almayı Denetleme: `cache`

Tarayıcılar, sonraki yüklemeleri hızlandırmak için GET isteklerini sık sık önbelleğe alır. Bu yararlı olsa da bazen her seferinde güncel verilere ihtiyaç duyarsınız.

Tarayıcının yanıtı önbelleğe almasını önlemek için cache: false ayarını yapın. Böylece isteğinizin sunucudan her zaman en güncel bilgileri alması sağlanır.

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

İstek Sınırları: `timeout`

Uzun süren istekler kullanıcı deneyimini olumsuz etkileyebilir. timeout seçeneği, isteğin tamamlanması için milisaniye cinsinden bir maksimum süre belirtmenizi sağlar.

İstek bu süre içinde tamamlanmazsa iptal edilir ve .fail() geri çağrısı tetiklenir.

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

Canlı: Gelişmiş AJAX Yapılandırması

Birden çok $.ajax() seçeneğini birleştiren kapsamlı bir örneğe bakalım. Bu istek bir yapılacaklar ögesi alır, beklenen JSON biçimini belirtir, özel bir üst bilgi ekler, önbelleğe almayı devre dışı bırakır ve bir zaman aşımı belirler.

Çıktı paragrafının nasıl güncellendiğini görmek için çalıştırmayı deneyin!

<!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>

AJAX Yapılandırma Kontrolü

/api/comments adresine yeni bir kullanıcı yorumu gönderen bir özellik oluşturduğunuzu düşünün. Bunun bir POST isteği olması, commentText ve userId içermesi ve karşılığında bir JSON nesnesi beklemesi gerekir. Ayrıca yorumun her zaman güncel olması için tarayıcının önbelleğe almasını önlemek istersiniz.

Bu senaryo için aşağıdaki $.ajax() seçeneklerinden hangileri gereklidir?

Özet: AJAX Yapılandırmasında Ustalaştınız

jQuery'nin $.ajax() yöntemini yapılandırma konusunda ustalaştınız!

url ve HTTP type seçeneklerini belirtmeyi öğrendiniz.
data seçeneğini kullanarak veri göndermeyi öğrendiniz.
Beklenen yanıt biçimini dataType ile tanımlamayı öğrendiniz.
Gelişmiş kullanım senaryoları için özel HTTP headers eklemeyi öğrendiniz.
cache ile tarayıcı önbelleğe almasını denetlemeyi öğrendiniz.
Yavaş istekler için timeout ile sınırlar belirlemeyi öğrendiniz.

Bu güçlü seçenekler, web uygulamalarınızda son derece özelleştirilmiş ve güvenilir eşzamansız etkileşimler oluşturmanızı sağlar.

Sıkça Sorulan Sorular

“AJAX İsteklerini Etkili Şekilde Yapılandırma” dersi ücretsiz mi?

Evet — “AJAX İsteklerini Etkili Şekilde Yapılandırma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 3 dersten oluşur.

“AJAX İsteklerini Etkili Şekilde Yapılandırma” dersinde ne öğreneceğim?

Eşzamansız isteklerinizi farklı senaryolara göre ince ayarlamak için .ajax() yönteminin veri türleri, üst bilgiler, önbelleğe alma ve zaman aşımı gibi kapsamlı seçeneklerini keşfedin. jQuery Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

jQuery Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te jQuery Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 1. dersidir.

“AJAX İsteklerini Etkili Şekilde Yapılandırma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu jQuery Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her jQuery Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

AJAX İsteklerini Etkili Şekilde Yapılandırma
AJAX Hatalarını ve Başarı Durumlarını Ele Alma
Etki Alanları Arası AJAX (CORS/JSONP)

← jQuery Academy Sayfasına Dön