Turning gears are the logo of co-scripts

Pek çok sitede ana sayfada veya ilgili sayfasında haberlerin tamamı verilmez. Özet denebilecek ilk paragrafı verilir ve "devamını oku" düğmesi yada bağlantısı ile devamının okunduğu sayfaya gidilmesi sağlanır. Bu yöntemin sağlıklı olduğunu düşünüyoruz. Ancak bazı portallarda yapılanma farklılığı nedeniyle haberin hemen orada genişleyerek tamamının görülmesi gerekebilir. Bunu sayfada herhangi bir yenilenmeye neden olmadan ajax ile yapabiliyoruz.

XMLHttpRequest veya Microsoft IE için  Microsoft.XMLHttp nesneleri kullanarak yapıyoruz. Bu nesneler tıpkı bir tarayıcı penceresi (nesnesi) gibi bir adresten talepte bulunuyor ve gelen metinsel (veya xml) formatlı cevabı bir değişkene aktarabiliyorlar.

Bir kez oluşturulduklarında aldıkları parametreleriyle kendi metodlarını kullandırarak farklı hizmetleri sunabiliyorlar.  Bu örnekte bahsi geçen bir haber özetinin tamamını verebilen bir sayfaya bir sorgu gönderip karşılığında bir haber metninin tamamını alacağız. Haber metninin içeriğinin html formatlı olduğunu düşünüyoruz. İhtiyaç duyulan tüm kodları inc klasöründe bir js dosyasında, hareketli - yükleniyor- gif uzantılı resmimizi de img klasöründe tutuyoruz.

Ana sayfamızda bir haber özeti içeren div, bir adet devamını oku yazan bağlantı (js fonksiyonu çağırıcı)  mevcut. Bağlantı onclick olayında gereken fonksiyon çağrısı ve üzerinde parametreleri içeriyor.

Devamını oku bağlantısı tıklandığında artık gerek olmayacağından kaldırılıyor. Tıklandığında işlem sürerken yükleniyor animasyonu geliyor (facebook tarzında).

devamı..

Burada görüldüğü gibi yüklenme esnasındaki mesajlar bir span içerisine getiriliyor. Bu farklı bir yere eklenebilir ve devamını oku bağlantısı ile bağımsız da olabilir.Veri çekmeye yarayan vericek() fonksiyonu herşeyi başlatıyor. 4 adet parametre alıyor. Parametreler şunlar:

  1. Birincisi bir url ve sonunda sorgu için gereken id numarası gibi parametreleri taşıyor. 
  2. Yüklenme işlemi süresince bir mesaj yada img göstermeye yarayacak alanın id si.
  3. Özet metnini taşıyan ve yükleme sonucu gelen içeriğin gömüleceği div yada span yada benzer elementin idsi.
  4. Yüklemenin sonucu gelen verinin ilgili alana eklenme metodu. Doğrudan ekleme, yer değiştirme, kırparak ekleme gibi...

vericek.js dosyasını şurada bulabilirsiniz. Tüm uygulamanın sıkıştırılmış halini buradan indirebilirsiniz. Amatör bir uygulama olması nedeniyle olası sıkıntılardan önce şurayı okumanızı rica ederim. Vakit buldukça geliştireceğim bu uygulama için temel bilgileri internetten öğrendiğim her kaynak ve kişiye tekrar teşekkür ederim.

Ayrıca bu uygulama yeni tanıştığım ve benden "bu tarz bir şeyi yapabilir miyiz?" diye sorarak yazmama vesile olan @resulyılmaz sayesinde yazıldı. Kendisine teşekkür ederim. 


co-scripts tag image ajaxyazinin devamidevamini oku
ID:112 | Okunma:2508

İlişkili Olabilecek Konular
Ajax İle Fonksiyonel İşler Yapma