Mustafa Demir
AJAX, web geliştiricilerinin web sayfalarında dinamik ve etkileşimli içerik oluşturmak için kullandıkları güçlü bir tekniktir. AJAX ile sayfanın tamamını yenilemeden belirli web sayfası bölümlerini güncelleyebilirsiniz. Bu, web sitenizin ziyaretçileri için kusursuz bir kullanıcı deneyimi sağlar.
AJAX özünde JavaScript, XML ve XMLHttpRequest nesnesi dahil çeşitli teknolojileri birleştirir. Bu teknolojiler, web tarayıcısı ile sunucu arasında eşzamansız olarak veri göndermek ve almak için birlikte çalışır.
Bu blog yazısında AJAX'ı nasıl çalıştığı ve WordPress'te neden bu kadar yararlı olduğu da dahil olmak üzere daha ayrıntılı olarak inceleyeceğiz. Ayrıca sitenizin işlevselliğini geliştirmek için AJAX'ı WordPress web sitenize uygulamaya ilişkin adım adım talimatlar da sunacağız.
AJAX'a Kısa Genel Bakış
AJAX, Eşzamansız JavaScript ve XML anlamına gelir; sunucudan eşzamansız olarak istekte bulunmanıza ve sayfalarınızı yeniden yüklemeden değişiklik yapmanıza olanak tanıyan bir teknolojidir. AJAX betiği, sunucudan bazı verileri döndürmesini ister ve ardından elde edilen verilerle web sayfalarını değiştirir.
Örneğin, randevu tarihinizi seçtiğiniz bir açılır menüyü ve rezervasyon için uygun saatleri dinamik olarak gösteren başka bir açılır listeyi hayal edin. Bir AJAX komut dosyası aracılığıyla, sunucuya tedavi açılır menüsünü seçmek için uygun olan saatler sorulmuştur.
AJAX ve REST API karşılaştırması
AJAX ve REST API, web geliştirmede kullanıcı deneyimini geliştirmek için kullanıldıkları için sıklıkla karşılaştırılır. Temel farklılıklarını görelim!
| AJAX | REST API'si |
| Daha zengin bir web deneyimi için bir dizi teknoloji | HTTP isteklerini işlemeye yönelik bir mimari stili |
| Ekranı eşzamansız olarak günceller | Kaynakların kullanımı etrafında döner |
| RESTful istekler gönderebilir | Bir AJAX istemcisi tarafından erişilebilir |
AJAX Nasıl Çalışır?
AJAX, eşzamansız işlemlere izin veren bir dizi web geliştirme tekniğidir. Bir web tarayıcısı ile bir web sunucusu arasındaki veri alışverişi. Web sayfalarının, tam sayfanın yeniden yüklenmesine gerek kalmadan dinamik olarak güncellenmesini sağlar.
Teknik olarak AJAX aşağıdakilerin bir kombinasyonundan yararlanarak çalışır: JavaScript, XML (bugünlerde diğer formatlar gibi olmasına rağmen JSON da kullanılır) ve XMLHttpRequest nesne. Tipik olarak şu şekilde çalışır:
- Olay Tetikleyici: Bir düğmeye tıklama veya form gönderme gibi bir olay, bir AJAX isteğini tetikler.
- XMLHttpRequest Nesnesi: JavaScript, tarayıcı ile sunucu arasında aracı olan XMLHttpRequest nesnesinin bir örneğini oluşturur.
- Eşzamansız İstek: XMLHttpRequest nesnesi (adım 2), kullanıcının web sayfasıyla etkileşimini kesmeden veya engellemeden sunucuya eşzamansız bir istek gönderir.
- Sunucu İletişimi: İstek, onu işleyen ve bir yanıt oluşturan sunucuya gönderilir.
- Veri Alma: Sunucu işlemi tamamladıktan sonra yanıtı tarayıcıya geri gönderir.
- Dinamik Güncelleme: Tarayıcı, JavaScript'i kullanarak, tüm sayfayı yeniden yüklemeden, alınan yanıta göre web sayfası içeriğini güncellemek için Belge Nesne Modelini (DOM) yönetir.
AJAX'ı kullanarak web geliştiricileri daha etkileşimli ve duyarlı web uygulamaları oluşturabilir. AJAX, gerçek zamanlı güncellemelere, dinamik içerik yüklemeye, form doğrulamaya vb. olanak tanıyarak genel kullanıcı deneyimini geliştirir.
Tam sayfanın yeniden yüklenmesi ihtiyacını azaltarak ve tarayıcı ile sunucu arasında kesintisiz veri alışverişine izin vererek daha sorunsuz, daha hızlı ve daha verimli web etkileşimlerini kolaylaştırır.
AJAX Neden Yararlıdır?
AJAX birçok durumda faydalıdır. Aşağıda bunlardan bazılarını inceleyelim:
Kullanım Örneği #1
AJAX, WordPress kullanıcılarının sayfanın tamamını yenilemeden dinamik olarak içerik yüklemesine olanak tanır; buna AJAX da denir. Dinamik İçerik Yükleme.
Örnek: bir blogunuz olduğunu hayal edin “Daha fazla yükle” sayfanın sonundaki düğme. AJAX'ı kullanarak, sunucudan ek blog gönderileri alabilir ve kullanıcı düğmeyi tıkladığında bunları mevcut içeriğe ekleyebilirsiniz.
Kullanım Örneği #2
AJAX şunları sağlar gerçek zamanlı güncellemeler WordPress web sitelerinde. Bunun bir örneği, WordPress web sitelerinde sıklıkla gördüğünüz canlı sohbet seçeneğidir.
Örnek: Kullanıcıların anında mesaj gönderip alabileceği bir canlı sohbet özelliğini düşünün. AJAX ile tüm sayfayı yeniden yüklemeden mesajlar sunucuya gönderilebilir ve gerçek zamanlı olarak sohbet arayüzünde görüntülenebilir.
Kullanım Örneği #3
AJAX geliştirir form gönderimi ve doğrulama WordPress'te. Bu, sayfayı yeniden yüklemeden hata yapmaları durumunda kullanıcılara anında geri bildirim verilmesine olanak tanır. Daha sorunsuz ve daha verimli bir form gönderme deneyimi sağlar.
Örnek: Web sitenizde bir iletişim veya potansiyel müşteri oluşturma formunuzun olduğunu varsayalım. AJAX'ı kullanarak verileri sunucuya göndermeden önce istemci tarafındaki form girişlerini doğrulayabilirsiniz.
Kullanım Örneği #4
AJAX taslakları otomatik olarak kaydeder WordPress'te. Bu, veri kaybını önlemeye yardımcı olur ve WordPress kullanıcıları için kusursuz bir yazma deneyimi sağlar.
Örnek: Bir blog yazısı yazarken veya bir sayfa oluştururken AJAX, içeriği periyodik olarak arka planda sunucuya gönderebilir ve manuel kaydetmeye veya sayfanın yeniden yüklenmesine gerek kalmadan taslak olarak kaydedebilir.
Kullanıcılar, WordPress geliştirmede AJAX tekniklerinden yararlanarak daha dinamik, etkileşimli ve duyarlı web siteleri oluşturabilir.
AJAX'ı WordPress'te kullanmak
WordPress yerel olarak AJAX'ı destekler. Görebilirsin “admin-ajax.php” içinde wp-admin klasörü. Başlangıçta WordPress yöneticisinden AJAX istekleri yapan tüm işlevler için oluşturuldu. Aynı zamanda web'in halka açık kısmı için de kullanılır.
Tüm WordPress AJAX isteklerinin bir PHP betiğinden geçmesi gerekir. Başka bir deyişle admin-ajax.php, içerik döndüren bir eylemin çağrıldığı PHP dosyası olmalıdır.
2013 yılında WordPress, başka bir kullanıcı bir WordPress gönderisini yazarken veya düzenlerken otomatik kaydetme özelliği, oturum açma süresinin dolması ve gönderi kilitleme uyarısı gibi birçok önemli işlevsellik sağlayan WordPress Heartbeat API'sini tanıttı.
Mesaj Kilidi
Başka bir kullanıcının üzerinde çalıştığı bir gönderiyi düzenlemeye çalıştığınızda, durumla ilgili bir açılır uyarı görünecektir. Görebileceğiniz üç eylem var. Tüm gönderiler, Ön izlemeVe Devralmak.
Yukarıda belirtilen özellikler, uygun iletişim ve yanıtlar için sunucuyu ve tarayıcıyı birbirine bağlayan WordPress Heartbeat API'si sayesinde mümkün kılınmıştır.
WordPress Heartbeat API, sunucuyla iletişim için istekler oluşturur ve veri/yanıt alındığında olayları tetikler. Bu genellikle sunucudaki yükü artırır ve sonunda WordPress yöneticisini yavaşlatır.
Örnek
WordPress kontrol panelime giriş yapıyorum ve bir yazı taslağı hazırlamaya başlıyorum. Daha sonra sekmeyi birkaç dakikalığına açıp diğer sekmelere göz atıyorum. Kontrol panelinde hala oturum açılmıştır ve admin-ajax'ın sürekli olarak istek gönderdiğini görebilirsiniz.
Yukarıda belirtilen bilete göre, WordPress'teki admin-ajax.php her 15 saniyede bir istek oluşturur. İstek, sunucuyla herhangi bir iletişim olabilir.
WordPress'teki AJAX istekleri aşağıdakiler tarafından yönetilir: admin-ajax.php içinde bulunan dosya wp-admin klasörü. Hem arka uç hem de kullanıcıya yönelik AJAX işlevleri için belirlenmiş dosyadır.
Bir AJAX isteği başlatmak için, istek verilerine bir eylem parametresinin aşağıdaki yöntemlerden birini kullanarak dahil edilmesi gerekir: ELDE ETMEK veya POSTALAMAK yöntem.
Bu eylem parametresi, kullanılacak belirli kancayı belirler. tetiklendi içinde admin-ajax.php dosya.
Kancalar adlandırıldı wp_ajax_my_action Ve wp_ajax_nopriv_my_actionNeresi my_action karşılık gelir GET veya POST isteğindeki action parametresinin değerine.
Şimdi WordPress'te nasıl kullanabileceğimizi görelim. WordPress'te yeniyseniz veya teknoloji konusunda bilgili değilseniz, bunu anlamanız zor olabilir. JavaScript'i iyi anlamak (jQuery yeterlidir) ve HTML, CSS ve PHP bilgisine sahip olmak önemlidir.
- Kullan wp_enqueue_script() AJAX isteklerini işlemekten sorumlu JavaScript dosyasını kuyruğa alma işlevi. Temanızda olduğu gibi uygun şekilde sıraya koyduğunuzdan emin olun. işlevler.php veya özel bir eklenti dosyası.
- Kullanın wp_localize_script() işlevi AJAX betiğini yerelleştirin. Bu, verileri PHP kodunuzdan komut dosyasına aktarmanıza olanak tanır ve bu verilere JavaScript'te erişilmesini sağlar.
- WordPress'i kullanın wp_send_json() veya wp_send_json_success() Ve wp_send_json_error() Yanıt verilerini istemci tarafı JavaScript'e geri gönderme işlevleri. Yanıta istediğiniz verileri veya bir hata mesajını ekleyebilirsiniz.
- Şunu kullanabilirsiniz: jQuery.ajax() yöntem veya kısayol jQuery.post() veya jQuery.get() AJAX isteğini sunucuya gönderme yöntemleri.
Bu örnekler, kullanıcı etkileşimlerini geliştirmek, performansı artırmak ve kusursuz bir kullanıcı deneyimi sağlamak için AJAX'ın WordPress içindeki farklı senaryolarda nasıl kullanılabileceğini göstermektedir.
Admin-ajax.php'deki İstekleri Analiz Etme
Eklenti istekleri WordPress'te admin-ajax.php ile ilgili birçok soruna neden olur. Bu eklentiler, açılır pencereler veya sosyal paylaşım sayacı güncellemeleri gibi belirli işlevler talep ederek WordPress yöneticisini yavaşlatabilir. Ancak tüm istekler admin-ajax.php dosyasının aşırı yüklenmesine neden olmaz.
İstekler doğru şekilde işlenirse ve eklenti geliştiricileri, eklentilerinde AJAX çağrılarını kullanmaya yönelik en iyi uygulamaları izlerse admin-ajax.php dosyası düzgün çalışacaktır.
Şimdi admin-ajax.php'de siteyi yavaşlatan istekleri kontrol etmenin en iyi yollarını inceleyelim.
1. Hata Ayıklamayı Etkinleştir
Aşağıdaki satırı sitenize ekleyerek WordPress hata ayıklama modunu etkinleştirin wp-config.php dosya:
define('WP_DEBUG', true);
2. Ağ İsteklerini İzleyin
Sitenizi tarayıcıya yükleyin ve incele > Ağ'a gidin. Ctrl + R tuşlarına basın ve admin-ajax.php dosyasını bulun. Ayrıntılarını görüntülemek için ağ listesinde admin-ajax.php isteğini seçin.
İstek yöntemine (GET veya POST), istek parametrelerine ve yanıt süresine dikkat edin. Önemli farklılıkları belirlemek için farklı isteklerin yanıt sürelerini karşılaştırın.
3. Eklentileri Devre Dışı Bırakın
Önbellekleme veya optimizasyon eklentileri gibi admin-ajax.php ile etkileşime girme olasılığı en yüksek olanlardan başlayarak eklentileri tek tek devre dışı bırakmaya başlayın.
Her eklentiyi devre dışı bıraktıktan sonra sayfayı yeniden yükleyin ve ağ isteklerini izleyin. Yanıt süresi veya boyutundaki değişiklikleri not edin.
4. Suçluyu Belirleyin
Belirli bir eklentiyi devre dışı bıraktıktan sonra yanıt süresinde önemli bir iyileşme veya admin-ajax.php isteklerinin boyutunda bir azalma fark ettiğinizde, suçluyu tanımlamış olabilirsiniz.
Diğer eklentileri yeniden etkinleştirin ve şüpheli eklenti etkinleştirildiğinde sorunun yeniden oluşup oluşmadığını doğrulayın.
WordPress Kontrol Panelini Hızlandırın
WordPress arka ucunu hızlandırmak için en iyi uygulama, Heartbeat API'sini devre dışı bırakmak veya en azından birkaç saniyede bir sunucuya çarpmaması için daha uzun bir zaman aralığı ayarlamaktır.
Bunun için yüklemeniz gerekir Breeze eklentisi. DreamHost müşterisiyseniz eklentiyi yüklemenize gerek yoktur çünkü DreamHost Breeze, WordPress uygulamalarıyla önceden yüklenmiş olarak gelir.
WordPress Yönetici Kontrol Panelinize giriş yapın. Şu yöne rotayı ayarla Eklentiler → Yeni Ekle → Breeze'i arayın → Yükle Ve Etkinleştir BT.
Şu yöne rotayı ayarla Ayarlar → Breeze → Heartbeat API'si. Burada Kalp Atışını yapılandırmak için 4 farklı seçenek bulacaksınız.
- Kalp Atışını Kontrol Edin: Arka Uç, Gönderi Düzenleyici ve Ön Uç için Heartbeat API'yi açmak veya kapatmak üzere düğmeyi değiştirebilirsiniz.
- Kalp Atışı Ön Uç: bu, Ön Uçunuzun davranışını değiştirmenize veya onu tamamen devre dışı bırakmanıza olanak tanır.
- Kalp Atışı Gönderi Editörü: bu, WP Post Editor'ınızın davranışını değiştirmenize veya onu tamamen devre dışı bırakmanıza olanak tanır.
- Kalp Atışı Arka Uç: bu, Arka Uçunuzun davranışını değiştirmenize veya onu tamamen devre dışı bırakmanıza olanak tanır.
Burada birden fazla kural oluşturmanız gerekir:
Varsayılan olarak, WordPress Heartbeat API'sinin varsayılan sıklığını alırsınız, ancak gereksinimlerinize göre birden fazla kural oluşturabilirsiniz.
Örneğin, WordPress Arka Uçunun (Gösterge Paneli) 2 dakika (120 saniye) içinde tetiklenmesini, ancak Yazı Düzenleyicinin 3 dakika (180 saniye) içinde tetiklenmesini isteyebilirsiniz.
Bunu yapmak için iki kural oluşturmalısınız: biri WordPress Kontrol Paneli için, diğeri Yazı Düzenleyici için. Sıklıklarını sırasıyla 2 ve 3 dakikaya ayarlayın.
AJAX Güvenlik Konuları
AJAX ile çalışırken dikkat edilmesi gereken bazı güvenlik hususları vardır. Burda biraz var:
- AJAX uygulamaları Siteler Arası Komut Dosyası Çalıştırmaya (XSS) karşı savunmasızdır. Bu, uygun doğrulamalar ve kodlama olmadan AJAX kodlarını değiştirmenin kolay olduğu anlamına gelir. Sonuç olarak bilgi çalmak, içerikle oynamak ve kötü niyetli eylemler gerçekleştirmek kolaylaşıyor.
- AJAX işlev çağrıları sunucuya düz metin olarak gider. Uygun bir protokol olmadan herkes hassas bilgileri çıkarabilir. Bu temelde veritabanınızı kötü niyetli aktörlerin insafına bırakır.
- AJAX bazı internet tarayıcılarıyla uyumsuz olabilir.
Özet
Bu noktaya ulaştıktan sonra AJAX'ın ne olduğunu ve ekranı eşzamansız olarak güncelleyip yenileyerek web uygulamalarının kullanıcı deneyimini nasıl iyileştirebileceğini öğrendiniz. Ayrıca AJAX'ın WordPress'te hem ön uçta hem de arka uçta nasıl kullanılacağını da gördük.
WordPress AJAX ile sayfayı yeniden yüklemeden sunucuyla etkileşim kurabilen daha dinamik ve duyarlı web siteleri oluşturabilirsiniz. Umarım bu blog yazısını yararlı ve bilgilendirici bulmuşsunuzdur ve WordPress web sitelerinizde AJAX'ı denemenizi tavsiye ederim.
S: WordPress admin-Ajax nedir?
AJAX, web sayfalarının tüm sayfayı yeniden yüklemeden güncellenmesine olanak tanıyan bir komut dosyaları ve teknolojiler koleksiyonudur. WordPress admin-ajax, WordPress'teki Ajax isteklerinin kodlamasını içeren bir dosyadır. Admin-ajax, Ajax'ı kullanan sunucu ile istemci arasında bir bağlantı kurar.
S: AJAX WordPress ile Çalışıyor mu?
Evet, AJAX, WordPress ile çalışır ve WordPress'in arka ucunun bir parçası olduğundan otomatik olarak WordPress'e uygulanır. Tüm sayfayı yeniden yüklemeden veritabanı işlemlerini yönetmek için kullanılır.
