JQuery Eğitimi (Bölüm 5): AJAX Hepsini!

İlan

JQuery mini eğitim serimizin sonuna yaklaştıkça, jQuery'nin en çok kullanılan özelliklerinden birine daha ayrıntılı bir şekilde bakmamızın zamanı geldi. AJAX, bir web sitesinin tüm sayfanın yeniden yüklenmesine gerek kalmadan arka plandaki bir sunucuyla iletişim kurmasını sağlar. Facebook tarzı sonsuz durum akışlarından form verilerinin gönderilmesine kadar, bu tekniğin yararlı olabileceği milyonlarca farklı gerçek yaşam durumu vardır.

Önceki eğiticileri okumadıysanız, bunu üst üste kurdukça bununla başa çıkmadan önce yapmanızı öneririm.

• Giriş: jQuery nedir ve neden ilgilenmelisiniz? Web'i Etkileşimli Hale Getirme: jQuery'ye GirişjQuery, neredeyse her modern web sitesinin kullandığı bir istemci tarafı komut dosyası kitaplığıdır - web sitelerini etkileşimli hale getirir. Tek Javascript kütüphanesi değil, ancak en gelişmiş, en desteklenen ve en yaygın kullanılan kütüphanedir ... Daha fazla oku
• 1: Seçiciler ve Temel Bilgiler jQuery Eğitimi - Başlarken: Temel Bilgiler ve SeçicilerGeçen hafta, jQuery'nin herhangi bir modern web geliştiricisi için ne kadar önemli olduğunu ve neden harika olduğunu anlattım. Bu hafta, sanırım ellerimizi bir kodla kirletip nasıl öğrendiğimizi ...
  instagram viewer
  Daha fazla oku
• 2: Yöntemler JQuery'ye Giriş (Bölüm 2): Yöntemler ve İşlevlerBu, jQuery web programlama serisine devam eden yeni başlayanların bir parçasıdır. Bölüm 1, projenize ve seçicilerinize nasıl dahil edeceğinizin jQuery temellerini ele aldı. 2. bölümde, devam edeceğiz ... Daha fazla oku
• 3: Sayfa Yükleme ve Anonim İşlevleri Bekleme JQuery'ye Giriş (Bölüm 3): Sayfanın Yüklenmesini Bekleme ve Anonim İşlevlerjQuery, modern web geliştiricisi için tartışmasız önemli bir beceridir ve bu kısa mini dizide size kendi web projelerinizden yararlanmaya başlamanız için bilgi vermeyi umuyorum. İçinde... Daha fazla oku
• 4: Olaylar jQuery Eğitimi (Bölüm 4) - Olay DinleyicileriBugün bir çentik başlatacağız ve gerçekten jQuery'nin nerede parladığını göstereceğiz - olaylar. Geçmiş dersleri takip ettiyseniz, şimdi temel kodu oldukça iyi anlamanız gerekir ... Daha fazla oku
• Chrome Geliştirici Araçları ile hata ayıklama Chrome Geliştirici Araçları veya Firebug ile Web Sitesi Sorunlarını AnlamaŞimdiye kadar jQuery öğreticilerimi takip ettiyseniz, bazı kod sorunlarıyla zaten karşılaşmış olabilirsiniz ve bunları nasıl çözeceğinizi bilmiyor olabilirsiniz. İşlevsel olmayan bir kod parçasıyla karşılaştığında, çok ... Daha fazla oku

A-Ne?

AJAX kısaltmasıdır Eşzamansız Javascript ve XML, ancak buradaki anahtar kelime eşzamanlı olmayan. Asenkron, bu isteklerin kullanıcının tarama deneyimini kesintiye uğratmadan arka planda gerçekleştiği anlamına gelir. Muhtemelen daha önce hiç fark etmemişsinizdir, ancak bir web sitesi dinamik olarak güncelleniyorsa, bunu yapmak için AJAX kullanma olasılığı yüksektir.

AJAX'tan önce, yeni veriler getirme veya kullanıcıdan geri bilgi gönderme gibi bir sunucuyla herhangi bir etkileşim biçimi, yeni bir sayfa yükleme ve yönlendirmeler kullanılarak yapılmış olmalıdır.

Bugün, bir JSON veri türü kullanarak bazı resimleri almak için AJAX'ı kullanabileceğimiz bir üçüncü taraf hizmeti olan Flickr'a bakacağız. Aslında Flickr'ın şeylerin alıcı tarafını nasıl uyguladığı önemli değil, çünkü bu API'ler - bilmemiz gereken tek şey bir API URL'si, ne tür veriler geri alacağımız ve nasıl değiştireceğimiz.

Daha fazla okumak için, bir süre önce hakkında başka bir öğretici yazdım iletişim formu gönderme için WordPress AJAX işleme WordPress'te AJAX Kullanımı Hakkında Bir EğitimAJAX, bizi basit "tıklama bağlantısının, başka bir sayfaya git" in ötesine taşıyan dikkat çekici bir web teknolojisidir. İnternetin Yapısı 1.0. Web sitelerinin içeriği olmadan dinamik olarak getirmesini ve görüntülemesini sağlar. kullanıcı ... Daha fazla oku , bu yüzden bunu da kontrol etmek isteyebilirsiniz; kendi PHP işleyicinizi yazmayı ve bunu “resmi” WordPress AJAX sürecine entegre etmeyi içerir.

AJAX Yöntemi

AJAX isteğinin temel biçimi şöyledir:

$ .ajax ({type: "GET veya POST", url: "API veya PHP işleyici URL'niz", veri türü: "JSON", // ne tür veriler istediğinize bağlı olarak, ancak en çok JSON ortak veri: {// bir anahtar kümesi: "değer" çiftleri}, başarı: fonksiyon (veri) {// başarılı bir veri dönüşünü yönet}, hata: fonksiyon (mesaj) {// hatayı hallet } });

Bu başlangıçta oldukça karmaşık görünüyor - bu kod eklentisinden girinti eksikliğinden yardım etmedi - ancak gerçek bir dünya örneğine ulaşmanın ne kadar kolay olduğunu göreceksiniz.

Flickr API AJAX

Bu örnekte, geçerli WordPress yayınıyla ilişkilendirilmiş etiketleri alacağız ve makalenin sonuna eklenecek bazı resimler getireceğiz. Orada bir jQuery belgelerinde benzer örnek, ancak adında bir kısayol yöntemi kullanır getJSON () Tam AJAX biçimini açıklamak yerine. Yalnızca JSON verilerini geri alacağınızı biliyorsanız, bu işlemlerin geçerli bir yolu olsa da, gerçek AJAX yöntemini öğrenmenin daha önemli olduğunu düşünüyorum, bu yüzden bunu yapacağız.

İlk olarak, bir yukarı single.php mevcut yazı etiketlerinin virgülle ayrı bir listesini çıkarmaya çalışacağız. Genellikle, the_tags () Bunu yapmak için iyi değil, ancak sonunda değişken olarak depolamak istediğimiz için bu iyi değil. the_tags () önceden biçimlendirilmiş olarak yankılar. Bunun yerine, get_the_tags ():

php. $ tagslist = get_the_tags (); foreach ($ taglist $ $ olarak) { echo $ tag-> name. ","; }

Bu iyi çalışıyor, bu yüzden bunu aşağıdaki gibi bir AJAX isteğinin içine Flickr API URL'sine göndereceğiz (not, bu bir ekran görüntüsüdür - girintiyi korumak için kod şu adreste bulunmaktadır: bu PasteBin).

Bu noktada, tarayıcı konsoluna çıkış yapmak veya varsa bir hata mesajını uyarmak için tüm bunları yapar. Döndürülen verilerle gerçekten bir şeyler yapmak için resimlerin yerleştirileceği bir yer ekleyin:

Ve başarı üzerinden yinelemek için AJAX çağrısının parametresi ürün döndürülür.

$ .each (data.items, function (i, item) {if (i == 3) false değerini döndürür; // 3 $ ("# flickr") olduğunda dur. append (""); });

Ve işte burada. bizler ek ekleme Döndürülen JSON nesnesinden 3 öğe (veriler sıfır endekslidir, bu nedenle 3. öğeye ulaşırsanız, aslında dördüncü öğedeyiz. Kafa karıştırıcı, biliyorum. Bu noktada, yanlış döndür dışarı atlamak her biri() Döndürülen nesnelerin içeriğini zaten inceledim, bu yüzden veri yapısını biliyorum ve sadece bir bağlantı ve IMG referansı çıkarıyorum. Başka neler iade edildiğini bilmek istiyorsanız, console.log (öğe) Orada.

İşte test sitemdeki sonuçlar ve Bu PasteBin'de tam kod. Geri gönderilen sonuçların temelde önemsiz olduğuna dikkat edin - gönderim etiketi dahil etti DIY için gömme tavuk koşusuve Flickr bana DIY örgüsü verdi. Güzel. Tabii ki, bu bir API ile çalışırken ve otomatik olarak bir şeyler yaparken karşılaştığınız engellerden biridir; gönderilerinizi yeniden etiketleyebilirsiniz (önemli bir taahhüt), isteği "herhangi" yerine "tüm" etiket isteme olarak değiştirebilir (dönüş olasılığı yüksektir) bu durumda hiçbir şey) veya API ile kullanılacak hedeflenmiş bir anahtar kelimeyi belirteceğiniz yeni bir özel alan oluşturun (muhtemelen en kolay).

SEO Konuları

Bu önemli bir nokta değil, ancak web siteleri geliştirme işinde olduğunuz için belirtilen: arama motorları, yapılan herhangi bir şey gibi sayfa yüklemesinde mevcut olmayan içeriği dizine eklemez AJAX aracılığıyla. Yapabileceğiniz en kötü şey, ana sayfanın dinamik olarak yüklenen tüm içerik için yalnızca iframe benzeri bir kap olması için blogunuzu tamamen AJAXify olacaktır. AJAX'ı akıllıca kullanın, artırmak sayfa içeriği, bir değiştirme. Veya korkunç sonuçlarla yüzleşin.

Okuduğunuz için teşekkürler, umarım size bazı fikirler verdim. Tabii ki, Flickr tek API değil - sadece Google “genel API”İle oynayabileceğiniz daha fazla şey bulacağınızdan emin olabilirsiniz.

JQuery UI eklentisine baktığımızda önümüzdeki hafta jQuery Tutorial serisinin son dersi olacak. Her zamanki gibi görüş ve önerilerinizi bekliyoruz; başkalarının yararlanacağı bir sorunuz varsa, bunları Yanıtlar sitemize göndermeyi düşünün.