jQuery Eğitimi (Bölüm 5) AJAX Hepsi Hepsi!

JQuery mini-tutorial serimizin sonuna yaklaştığımızda, jQuery'nin en çok kullanılan özelliklerinden birine daha derinlemesine bakmamızın zamanı geldi. AJAX, bir web sitesinin arka planda bir sunucuyla tüm sayfanın yeniden yüklenmesini gerektirmeden iletişim kurmasını sağlar. Facebook tarzı sonsuz durum akışlarından form verilerini göndermeye kadar, bu tekniğin faydalı olabileceği milyonlarca gerçek yaşam durumu var..

Önceki eğitimleri okumadıysanız, bunu birbirleriyle kurdukları gibi ele almadan önce bunu yapmanızı öneririm..

• Giriş: JQuery nedir ve neden umursamalısınız? Web İnteraktif Yapmak: jQuery'e Giriş Web İnteraktif Yapmak: jQuery'e Giriş jQuery, neredeyse her modern web sitesinin kullandığı bir istemci tarafı komut dosyası kütüphanesidir - web sitelerini etkileşimli kılar. Bu tek Javascript kütüphanesi değil, ama en gelişmiş, en çok desteklenen ve en çok kullanılan…
• 1: Seçiciler ve Temeller jQuery Eğitimi - Başlarken: Temel Bilgiler ve Seçiciler jQuery Eğitimi - Başlarken: Temel Bilgiler ve Seçiciler Geçen hafta, herhangi bir modern web geliştiricisi için jQuery'nin ne kadar önemli olduğu ve neden harika olduğu hakkında konuştum. Bu hafta sanırım bir kodla ellerimizi kirletme ve öğrenmenin zamanı geldi…
• 2: Yöntemler jQuery'e Giriş (Bölüm 2): Yöntemler ve İşlevler jQuery'e Giriş (Bölüm 2): Yöntemler ve İşlevler Bu, jQuery web programlama serisine devam eden yeni başlayanların bir parçasıdır. Bölüm 1, projenize nasıl dahil edileceğine ilişkin jQuery temellerini ve seçicileri kapsamıştır. 2. bölümde, devam edeceğiz…
• 3: Sayfa Yükleme ve Anonim İşlevleri Beklemek jQuery'e Giriş (Bölüm 3): Sayfa & Anonim İşlevleri Yüklemek İçin Beklemek jQuery'e Giriş (Bölüm 3): Anonim İşlevleri Yüklemek İçin Sayfanın Beklenmesi modern web geliştiricisi ve bu kısa mini seride kendi web projelerinizde kullanmaya başlamanız için size bilgi vermeyi umuyorum. İçinde…
• 4: Olaylar jQuery Eğitimi (Bölüm 4) - Etkinlik Dinleyicileri jQuery Eğitimi (Bölüm 4) - Etkinlik Dinleyicileri Bugün bir çentik açacağız ve gerçekten jQuery'nin nerede parladığını göstereceğiz - olaylar. Geçmiş dersleri takip ettiyseniz, şimdi temel kodu oldukça iyi anlıyor olmalısınız.
• Chrome Geliştirici Araçları ile Hata Ayıklama Chrome Geliştirici Araçları Veya Firebug ile Web Sitesi Sorunlarını Çözme Chrome Geliştirici Araçları veya Firebug ile Web Sitesi Sorunlarını Çözme jQuery öğreticilerimi şimdiye kadar takip ediyorsanız, zaten bazı kod sorunlarıyla karşılaşmış olabilirsiniz. Onları düzeltmek için. İşlevsel olmayan bir kod biti ile karşılaştığımızda, çok…

A-Ne?

AJAX kısaltmasıdır Asenkron Javascript ve XML, ama anahtar kelime burada eşzamanlı olmayan. Eşzamansız, bu isteklerin arka planda gerçekleştiği, kullanıcının tarama deneyimini engellemediği anlamına gelir. Muhtemelen daha önce hiç farketmemişsinizdir, ancak bir web sitesi dinamik olarak güncelleniyorsa, bunu yapmak için AJAX kullanması iyi bir ihtimaldir..

AJAX'ten önce, bir sunucu ile herhangi bir etkileşim şekli, yeni veri alıyor veya kullanıcıdan geri bilgi gönderiyor olması halinde, yeni bir sayfa yükleme ve yönlendirmeleri kullanılarak yapılması gerekirdi..

Bugün, bir JSON veri türünü kullanarak bazı resimler çekmek için AJAX'ı kullanabileceğimiz Flickr adlı üçüncü taraf hizmetini kullanacağız. Aslında Flickr'ın şeylerin alıcı tarafını nasıl uyguladığı önemli değil, çünkü bu onun güzelliği API'ler - Tüm bilmemiz gereken bir API URL'si, ne tür verileri geri alacağımız ve onu nasıl yöneteceğimiz.

Daha fazla okumak için, bir süre önce WordPress'te AJAX'ı bir iletişim formu gönderimi için kullanma hakkında bir ders daha yazdım. WordPress'te AJAX'i Kullanmaya İlişkin Bir Öğretici AJAX'i Kullanarak Üzerine Bir Öğretici “linke tıklayın, başka bir sayfaya gidin” İnternetin yapısı 1.0. Web sitelerinin, kullanıcı olmadan dinamik olarak içerik toplamasını ve görüntülemesini sağlar… bu yüzden bunu da kontrol etmek isteyebilirsiniz; kendi PHP işleyicinizi yazmayı ve bunu “resmi” WordPress AJAX işlemi.

AJAX Yöntemi

İşte bir AJAX isteğinin temel formatı:

$ .ajax (type: "GET or POST", url: "API veya PHP işleyici URL'niz", datatype: "JSON", // ne tür verileri geri almak istediğinize bağlı olarak, JSON en yaygın veridir: // bir anahtar kümesi: "değer" çiftleri, success: function (data) // başarılı bir veri dönüşü işle, error: function (mesaj) // hatayı işle);

Bu ilk bakışta oldukça karmaşık görünüyor - bu kod eklentisinden girintisizlik olmamasına yardımcı olmuyor - ama gerçek bir dünya örneğine girmenin 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ı görüntüleri alacağız. JQuery belgelerinde benzer bir örnek var, ancak adı verilen bir kısa yol yöntemi kullanıyor getJSON () tam bir AJAX formatını açıklamak yerine. Bu, yalnızca JSON verilerini geri alacağınızı biliyorsanız, gerçek bir işlem yapmanın yolu olsa da, gerçek AJAX yöntemini öğrenmenin daha önemli olduğunu düşünüyorum, bu yüzden bunu yapacağız..

İlk önce bir tane single.php ve şu anki posta etiketlerinin basit bir virgül ayri listesini eklemeye çalisacagiz. Genellikle, kullanırdın the_tags () Bunu yapmak için, ama sonunda bunları değişken olarak saklamak istediğimiz için bu iyi değil. the_tags () önceden biçimlendirilmiş doğrudan dışarı yankıları. Bunun yerine kullanacağız get_the_tags ():

isim "".; ?>

Bu iyi çalışıyor, bu yüzden bunu bir AJAX isteğinin içinde Flickr API URL'sine aşağıdaki şekilde yazdıracağız (not, bu bir ekran görüntüsüdür - girintiyi korumak için kod bu PasteBin'de mevcuttur).

Bu noktada, tarayıcı konsoluna çıktı almak veya varsa bir hata mesajı vermek için her şeyi yapar. Döndürülen verilerle bir şeyler yapmak için, resimlerin yerleştirileceği bir yere ekleyin:

Ve düzenle başarı üzerinde yineleme yapmak için AJAX çağrısının parametresi ürün bu iade edildi.

$ .each (data.items, function (i, item) if (i == 3) false döndür; // 3 $ ("# flickr") olduğunda dur. append ("
SEO hakkında önemli noktalar
Bu önemli bir nokta değil, ancak web sitelerini geliştirme işinde olduğunuzdan bahsetmeliyiz: arama motorları, AJAX aracılığıyla yapılan herhangi bir şey gibi sayfa yükünde bulunmayan içeriği indekslemeyecektir. Yapabileceğiniz en kötü şey, ana sayfanızın dinamik olarak yüklenen tüm içerikler için yalnızca bir iframe benzeri kapsayıcı olması için blogunuzu tam olarak AJAXify'tır. Akıllıca, AJAX kullanın. artırmak sayfa içeriği değiştirme. Veya korkunç sonuçlarıyla yüzleşmek.
Okuduğunuz için teşekkürler ve umarım size bazı fikirler vermişimdir. Tabii ki, Flickr orada tek API değil - sadece Google “genel API” ve oynayabileceğin daha fazla şey bulacağına eminsin.
Gelecek hafta, jQuery UI eklentisini kontrol ederken jQuery Tutorial serisindeki son ders olacak. Her zaman olduğu gibi, görüş ve önerilerinizi bekliyoruz; başkalarının yarar sağlayacağı bir sorunuz varsa, Cevaplar sitemize göndermeyi düşünün.