jQuery Ajax kullanarak web uygulamalarınızda veri işlemlerini kolayca yapabilirsiniz Bu yazıda, Ajax kullanarak veri çekme ve gönderme işlemlerinin nasıl yapılacağına dair detaylı bilgi bulacaksınız Hemen öğrenin ve web uygulamalarınızı daha da geliştirin!
Birçok internet sitesi, anında veri değişiklikleri ve güncellemeleri gerektirir. jQuery Ajax, bu tür işlemleri kolaylaştırır ve hızlandırır. Bu makalede, jQuery Ajax kullanarak veri çekme ve gönderme işlemleri ele alınacaktır.
Ajax, asenkron JavaScript ve XML terimidir. Ajax kullanarak, tarayıcının sayfayı yeniden yüklemeden sunucu ile veri alışverişi yapması mümkündür. Bu, web sayfalarının daha hızlı ve daha etkileşimli hale gelmesini sağlar.
Bir web uygulamasında, verileri sunucudan almak veya sunucuya göndermek için, HTTP istekleri gerekmektedir. jQuery Ajax, bu istekleri yapılandırmak ve göndermek için çeşitli yöntemler sağlar. Bu sayede, istenilen veriler anında alınabilir veya gönderilebilir.
Bu makalede, Ajax ile veri çekme ve gönderme yöntemleri açıklanacaktır. İşlem yapılırken, verilerin güvenliğine de önem verilmektedir.
Ajax Nedir?
=Ajax, Asenkron JavaScript ve XML terimidir ve web sayfalarının daha hızlı ve etkileşimli hale gelmesini sağlar. Asenkron JavaScript, tarayıcının sayfayı yeniden yüklemeden sunucu ile iletişime geçmesini sağlar, böylece kullanıcılara daha iyi bir deneyim sunar. Ajax ile, web sayfaları anında güncellenebilir ve değiştirilebilir. Bu sayede kullanıcı etkileşimi artar ve web uygulamalarının performansı yükselir. XML kullanılabileceği gibi, günümüzde daha çok JSON kullanılmaktadır. JSON verileri daha az yer kaplar ve daha hızlı bir şekilde işlenebilir.
HTTP İsteği Gönderme
Web uygulaması geliştirirken, sunucuya veri göndermek veya almak önemli bir adımdır. Bunun için, HTTP isteği göndermek gereklidir. jQuery Ajax, veri gönderme ve almak için çeşitli yöntemler sağlar.
GET ve POST istekleri en popüler HTTP istekleridir. GET isteği, sunucuya URL parametrelerini ekleyerek çalışır. Bu yöntemle verileri göndermek kolaydır, ancak veriler URL'de görüntülenebilir, bu nedenle güvenli olmayabilir. $.get metodu, GET isteği göndermek için kullanılır. Veriler URL'de görüntülenir. $.getJSON metodu, GET isteği göndermek için kullanılır. Veriler, bir JSON dosyasından alınabilir.
POST isteği ise, verileri URL'de değil, istek gövdesinde (body) taşır. Bu yöntemi kullanarak veri göndermek, daha güvenlidir. $.post metodu, POST isteği göndermek için kullanılır. Veriler istek gövdesinde gönderilir. Bu yöntemle gönderilen veriler URL'de olmadığından, kalabalık URL'lerden kaçınarak daha temiz bir URL oluşturulabilir.
GET İsteği
=GET isteği, web sayfalarındaki bir formun içeriğini almak ve sunucuya göndermek için kullanılır. Bu yöntem, sunucunun belirtilen URL'ye parametre ekleyerek dosya veya sayfa yüklemesini sağlar. GET isteği, sunucu yanıtını tarayıcıya geri döndürür ve sonuç, sayfayı yeniden yüklemeden gösterilir.
GET isteği, verileri URL'de gönderir, bu nedenle sunucuya sadece sınırlı sayıda veri gönderilebilir. Veriler ayrıca URL'de gösterildiği için güvenli değildir. GET isteği, büyük veri dosyaları göndermek için uygun değildir ve yalnızca veri almak için kullanılmalıdır. Bu yöntemi kullanarak, sunucudan dosya veya sayfa indirilebilir ve URL'de görüntülenebilir. Verileri güvenli şekilde göndermek için, POST isteği kullanılmalıdır.
$.get Yöntemi
=Bu yöntem, verileri sunucudan almak için kullanılır ve URL iletiliri. Bu yöntemle istek yaparken veriler URL'de görüntülenebilir, bu nedenle güvenli olmayabilir. Ancak, basit işlemler için idealdir. $.get() yöntemi, parametre olarak bir URL ve bir işlev (callback) alır. İşlev, istek tamamlandığında çalıştırılır ve yanıt olarak sunucu tarafından döndürülen verileri işler.
Bu yöntem, JavaScript'te bulunan XMLHttpRequest nesnesini kullanarak çalışır. $.get() yöntemi, GET istekleri için kullanılabilecek bir alternatif olarak da sağlanmaktadır. İsteğin tamamlanması durumunda işlev çağrılacak ve veriler ilgili parametrelerle birlikte işlev parametrelerine aktarılacaktır. Bu yöntem, verileri kolayca almak için kullanılabilir, ancak veriler URL'de saklandığından, hassas verilerin kullanılması durumunda güvenli olmayabilir.
$.getJSON Yöntemi
=$.getJSON yöntemi, GET isteği göndermek için kullanılır ve veriler, JSON dosyasından alınır. Bu yöntem, verileri JSON formatında aldığı için daha hızlı ve daha etkili bir yöntemdir. Ayrıca bu yöntem, $.get yöntemine göre daha güvenlidir. JSON, JavaScript nesnesi olarak verileri depolar ve Ajax kullanarak alınan veriler JSON'nin parse edilmesiyle kullanılabilir hale gelir.
JSON dosyası, sunucuda bir dosya olarak saklanır ve $.getJSON yöntemi kullanılarak alınır. Sunucuda bulunan JSON dosyasının URL'si, $.getJSON yöntemi içinde belirtilir. Bu yöntem, sunucudan alınan verileri otomatik olarak JSON biçiminde ayrıştırır ve kullanılabilir bir hale getirir.
| $.getJSON Yöntemi Özellikleri | |
|---|---|
| Parmetre | Açıklama |
| url | Alınacak JSON dosyasının URL'si |
| data | İsteğe bağlı bilgi, verilerin istenilen JSON dosyasına eklenmesini sağlar |
| success | İsteğin başarılı olduğunda, işlenen veriler için geri çağırılacak işlevi belirtir |
| error | İsteğin başarısız olduğunda geri çağırılacak işlevi belirtir |
$.getJSON yöntemi kullanırken, verilerin nasıl kullanılacağını belirlemek önemlidir. Bu yöntem, verileri JSON dosyasından aldığı için, verileri kullanmadan önce parsing işlemi gereklidir. parsing işlemi, JSON cümlelerinin bir JavaScript nesnesine dönüştürülmesini sağlar.
- Verileri kullanmadan önce, JSON cümlesinin doğru biçimlendirildiğinden emin olun
- JSON verilerini bir dizi veya nesne olarak almak mümkündür
- JSON dosyası sunucuda iken, URL'yi belirlerken doğru yolu belirleyin
POST İsteği
Web uygulamalarında, kullanıcıların güvenli bilgileri (örneğin, kullanıcı adı ve şifre) göndermeleri gerekebilir. POST isteği, verileri URL'ye eklemek yerine istek gövdesinde (body) taşır. Bu, verilerin URL'de görüntülenmesini engeller, böylece verileri göndermek daha güvenli olur.
$.post() yöntemi, POST isteği göndermek için kullanılabilir. Aşağıdaki örnekte, kullanıcı adı ve şifre göndermek için bir POST isteği oluşturulabilir:
$.post("giris.php", { kullaniciAdi: "example", sifre: "pa$$word"}, function(data, status){ alert(data);});Bu çağrı, "giris.php" adlı dosyaya bir POST isteği gönderir ve verileri istek gövdesinde gönderir. Gelen veriler, bir işlevle (function) işlenebilir.
$.post Yöntemi
=Bu yöntem, jQuery Ajax kullanarak verileri gönderme işleminde, POST istek göndermek için kullanılır. Veriler, URL'de değil, istek gövdesinde (body) taşınır. Bu işlem daha güvenlidir, çünkü veriler URL'de görüntülenmez.
$.post() yöntemi, üç parametre alır: URL, gönderilecek veriler ve bir geri çağırma fonksiyonu. Geri çağırma fonksiyonu, sunucu yanıtını işlemek için kullanılır.
$.post() yöntemi aynı zamanda verileri JSON veya XML biçiminde de gönderebilir. Bunun için, istek gönderilmeden önce contentType özelliği ayarlanmalıdır.
$.post() yöntemini kullanarak, web sayfasının sürekli olarak yenilenmesi gereken durumlarda da kullanılabilir. Örneğin, bir web formundaki bir alan değiştirildiğinde, başka bir alana bağlı olarak bir sonraki alanın değeri değiştirilebilir.
Aşağıdaki örnekte, bir POST isteği gönderilerek, bir web sayfasında bir metin kutusundan girilen verilerin doğruluğu sunucuda kontrol edilir ve sonucu kullanıcıya bildirilir:
$.post("kontrol.php", {username: "kullanici_adi", password: "sifre"}).done(function(data) { if (data == "success") { alert("Giriş başarılı!"); } else { alert("Hatalı kullanıcı adı veya şifre!"); }});Yukarıdaki örnekte, $.post() yöntemi kullanılarak, "kontrol.php" adlı bir dosyaya, kullanıcı adı ve şifre gönderilir. Geri çağırma fonksiyonu kullanarak, sunucudan dönen yanıt işlenir ve sonuca göre bir mesaj kullanıcıya gösterilir.
Ajax Yanıtı İşleme
Sunucudan alınan yanıta bağlı olarak, Ajax verileri farklı şekillerde işleyebilir. Bu sayede web sayfaları dinamik olarak değiştirilebilir hale gelir.
$.ajax() yöntemi, verileri yanıtın türüne göre işlemek için kullanılabilir. Örneğin, JSON formatında bir yanıt alındığında, $.getJSON() yöntemi kullanılarak yanıt işlenebilir. Yanıtın HTML formatında olduğu durumlarda, yanıttaki belirli bir bölüme erişmek için jQuery seçicileri kullanılabilir.
Bunun yanı sıra, $.ajaxSetup() yöntemi, AJAX isteklerinin tümü için varsayılan işlem ve hata işlevlerini belirleyebilir. $.ajaxStart() ve $.ajaxStop() yöntemleri ise AJAX isteklerinin başlangıcında ve sonunda belirli bir işlevin çalıştırılmasını sağlar.
Tüm bu yöntemler, web sayfalarının daha dinamik ve etkileşimli hale gelmesini sağlar ve verilerin anlık olarak gösterilmesini mümkün kılar.
$.ajaxSetup Yöntemi
$.ajaxSetup yöntemi, bir Ajax isteği için varsayılan seçenekleri ayarlayan bir yöntemdir. Bu seçenekler, $.ajax() yöntemi tarafından kullanılabilir. Bu yöntemle, önceden tanımlanmış seçenekler belirleyebilirsiniz. Bu, özellikle birden fazla Ajax isteğiyle çalışırken zaman tasarrufu sağlar. Bu yöntemle belirlediğiniz seçenekler, $.ajax() yöntemiyle belirteceğiniz seçenekleri geçersiz kılar. Bu yöntem yalnızca bir kez çağrılır ve diğer tüm Ajax isteklerinde belirtilen varsayılan ayarlar kullanılır.
$.ajaxSetup() yöntemi, jQuery versiyon 1.4.2'den itibaren kullanılabilmektedir. Bu yöntem, kodun okunmasını ve yönetilmesini basitleştirir. Kullanıcı, özel seçenekleri belirleyerek daha hızlı ve etkili bir şekilde kod yazabilir. Bu yöntem ayrıca, her bir Ajax isteği için tekrar tekrar seçenek belirleme zahmetinden de kurtarır.
$.ajaxSetup() yönteminin kullanımı oldukça basit ve pratiktir. Örneğin, tüm Ajax isteklerinde, varsayılan olarak veri türü olarak JSON kullanmak istediğimizde şu kodu kullanabiliriz:
$.ajaxSetup({dataType: "json"});
Bu kod, tüm Ajax isteklerine otomatik olarak JSON dosyası türü seçeneğini atar. Yani bu seçenek, ayrı ayrı her Ajax isteği için tanımlanmak zorunda kalmaz. Ayrıca, bu seçeneği geçersiz kılabilmek için, $.ajax() yöntemiyle belirtilen seçeneğini kullanabilirsiniz.
Tüm Ajax isteklerinde belirtilen seçenekler arasında; global, beforeSend, complete, context, timeout ve async gibi seçenekler bulunur. Bu seçeneklerin açıklamaları jQuery Ajax dokümanında açıklanmıştır. Ayrıca, $.ajaxSetup() yöntemi, hem anahtarı hem de değeri olan bir nesne örneği alır. Değerler, sabit değişkenler veya fonksiyonlar olabilir.
Genel olarak, $.ajaxSetup() yöntemi, birden fazla Ajax isteği için varsayılan seçenekleri belirler ve aynı seçeneklerin ayrı ayrı tanımlanması zorunluluğunu ortadan kaldırır. Bu nedenle, kod okunabilirliğini iyileştirir ve kod yazma sürecini hızlandırır.
$.ajaxStart ve $.ajaxStop Yöntemleri
=Bu yöntemler, AJAX isteği başladığında veya tamamlandığında bazı işlemleri gerçekleştirmek için kullanılır. $.ajaxStart, AJAX isteği başlar başlamaz çalıştırır ve genellikle yük göstergelerini görüntülemek veya diğer isteğe bağlı işlemleri gerçekleştirmek için kullanılır. $.ajaxStop, AJAX isteği tamamlandığında çalıştırılır ve genellikle yük göstergelerini gizlemek veya diğer isteğe bağlı işlemleri gerçekleştirmek için kullanılır. Bu yöntemler genellikle $.ajax() yöntemi içinde kullanılır.
- $.ajaxStart ve $.ajaxStop yöntemleri için örnek kullanım:
$(document).ajaxStart(function() { $('#loading').show(); // yük göstergesi görünür});$(document).ajaxStop(function() { $('#loading').hide(); // yük göstergesi gizlenir}); Bu örnekte, AJAX isteği başladığında, #loading ID'li yük göstergesi görünür ve istek tamamlandığında gizlenir.