Posts Tagged :

xml

JavaScript XmlHttpRequest 657 588 mezo

JavaScript XmlHttpRequest

Merhaba arkadaşlar bu yazımda sizlere Javascript ile yapılabilen çok yararlı bir o kadar performanslı hep görüp acaba nasıl dediğimiz bir yapıyı anlatmaya çalışacağım…
XML HTTP REQUEST Javascript ile herhangi bir server’a http request yapmanıza olanak veren guzel bir objedir. Gelen cevabı parse edip sayfadaki bazi öğeleri değistirebilir ve sayfa refresh olmadan bir cok şey yapilabilir. Yani işin kısası Postback olmadan bilgileri çekebilme işlemini gerçekleştirmemize yardımcı oluyor. Örnek olarak Google da yazdığımız bir harf tamamlanarak öneriler halinde geliyor. Sayfanın yenilendiğini görmüyoruz sadece önerilerin belirdiği gözlemleniyor ama bu verilerde bir veritabanından geliyor o derece hızlı 😉


Bu teknolojiyi Internet Explorer, Mozilla Firefox,Opera ve Safari destekliyor.Xml Http Request İnternet Explorer ‘da ActiveX Control , Firefox ‘ta ise DOM (Document Object Model)’ in bizzat parçasidir. Internet Explorer 7’ den itibaren native olarak desteklenmektedir. Bu sayede de artik ActiveX ‘i kapatilmis browserlarda dahi calisabilmektedir.
Bu yapının avantajlarını şöyle sıralayabilirim :
• En önemli artısı, sayfa yenilenmediği için değişken olmayan diğer kısımların sunucuda yeniden işlenip sunucuyu yorması engellenir;
• Kullanıcıda tekrar yüklenmediğinden bant genişliği boşa harcanmaz, aynı zamanda kullanıcı tarafında sayfalarda daha hızlı işlem yapılır.
• Sayfayı yenilenmeden içeriğimizi alıyor olmamız, web uygulamamıza bir masaüstü uygulama görünümü katar.
• Web uygulamalarının tek sıkıntısı, hızlı ve pratik çalışamıyor olmanızdır. Web yazılımları masaüstündeki yazılımlar gibi pratik kullanılan şeyler olmalıdır
• XMLHttpRequest aslında javascript ile sunulmuş bir kolaylıktır. Web sitesinin eş zamanlı olarak arka planda çalışan olaylarını takip eder. XML CSS ve javascript ile sonucun anında görülmesini sağlar.
• XMLHttpRequest istemci tarafında (Client Side) çalışır. Birden fazla asenkron web sayfasına postback ve yenileme yapmadan istekte bulunabilir ve gelen cevapları istekte bulunanlara iletir.

ONREADYSTATECHANGE
Sunucuya bir istek gönderilmesinden sonra, sunucudan dönen veriyi alabilecek bir işleve ihtiyacımız var. onreadystatechange özelliği sunucunun yanıtını işleyecek olan fonksiyonu tutar.
Aşağıdaki kod hem boş bir fonksiyon tanımlar hemde onreadystatechange özelliğini ayarlar

xmlHttp.onreadystatechange=function(){ // Buraya kod yazacağız}

 

READYSTATE ÖZELLİĞİ
Sunucu yanıtının durumunu tutar. readyState her değiştiğinde onreadystatechange fonksiyonu çalıştırılır. Sunucudan gelen yanıtın tamamlandığını (veriyi alabileceğimiz durumu) kontrol etmek için onreadystatechange işlevimize bir If ifadesi ekleyeceğiz:

xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4)

{ // Veriyi sunucu yanıtından al }
}

 

RESPONSETEXT ÖZELLİĞİ
Sunucudan gelen veri responseText özelliği ile alınabilir.
Kodumuzda “time” form değişkenimizin değerini responseText değerine eşitleyeceğiz:

xmlHttp.onreadystatechange=function(){

if(xmlHttp.readyState==4)

{

document.myForm.time.value=xmlHttp.responseText;

}
}

XMLHttpRequest nesnesini etkin şekilde kullanmanın 2 yolu mevcut:

Send the Request
Bu yöntem bir XMLHttpRequest nesnesi yaratıp olayları dinlemesi için atamaktır.
Basit olarak bir xhr nesnesi yaratıyoruz:

var xhr = new XMLHttpRequest();

Daha sonra oluşturduğumuz nesneyi onreadystatechange ile olayları dinlemesi için görevlendirmek:

xhr.onreadystatechange = myCallback;

Ardından open() metodunu çağırıyoruz.

xhr.open(‘GET’, ‘somefile.txt’, true);

ilk parametre HTTPRequest tipini belirler (GET,POST,HEAD,……) Get ve Post en sık kullanılanlardır. Get deyimini istekle birlikte çok fazla data göndermemiz gerekmiyorsa kullanırız. Bunun aksi durumlarda POST kullanırız.
İkinci parametre bizim istekte bulunduğumuz URL dir. Örnekte belirtilen bir text dosyasıdır sayfamızla aynı adres içerisinde bulunur.
Son parametremizde isteğin boolean değerdir isteğin eş zamanlı olmaması durumunu true veya false değer ile belirler.
Son adım olarak isteği göndermektir.

xhr.send(”);

Send() metodu istekle birlikte herhangi bir datayıda içerebilir. Get ile gönderilen isteklerde bu boş bir stringdir çünkü data URL olarak belirttiğimiz dosya yada adrestedir. POST ile gönderilen isteklerde bir query string mevcuttur key=value&key2=value2.
Bu noktada istek gönderilir ve kodlar diğer bir göreve atanabilir. Callback fonksiyonu isteğimizim serverdan geri gelmesi ile çağırılır.

Process the Response
Olay dinleyici cevap geldiğinde uyarır ve kodlarımız gelen cevap ile yararlı işler yapar her gelen cevabı boşa kontrol ve ya işleme sokmak zorunda kalmayız.
Readystatechange olayı ile bir dinleyici yerleştirdik XHR nesnesinin readystate özelliğini çağırdık. Readystatechange olayı çalıştığında her zaman değişen bir özelliktir .
Readystate özelliği şu değerleri takip eder
0—uninitialized
1—loading
2—loaded
3—interactive
4—complete = istek geri geldi ve işlendi.
Readystate özelliğini 4 olarak ayarladığımızda bunun anlamı istek geri geldi ve işleme girdi demektir. 4 özelliği sadece bununlada kalmayarak HTTP istek durum kodlarınıda inceler. Olmayan bir URL gönderildiğinde alınadan HTTP istek kodu 404 (Dosya bulunamadı) hatasıdır.
Eğer dönen durum kodu 200 (ok ) ise bu geçerli bir adres bulunduğunu XHR nesnesinin çalışabileceğini belirtir.

function myCallback() {if (xhr.readyState < 4) {

return; // not ready yet

}

if (xhr.status !== 200) {

alert(‘Error!’); // the HTTP status code is not OK

return;

}

// all is fine, do the work

alert(xhr.responseText);

}

Önce istekte bulunduğumuz sayfayı yeni içerik olarak almış olacağız ve bunu ister sayfada görüntüleyebilir istersekte bir takım hesaplamalarda kullanabiliriz.

Hadi bununla ilgili bir uygulama yapalım kafalarda nasıl çalışır bu sorusu olmasın 😉
XMLHTTP REQUEST yöntemiyle databasede bulunan kategorilere ait ürünleri hızlı bir biçimde ekranda görüntüleyeceğiz.
Öncelikle XmlHttpRequest nesnemizi yaratmak için bir function yazıyoruz.

 

Daha sonra oluşturduğumuz bu nesneye get ile parametre yollayabileceğimiz ve geri dönüş sağlayabileceğimiz başka bir function daha yazıyoruz.

Daha sonra Handler ile istekte bulunduğumuz ürün grubunun kategori id sini birlikte yollayabileceğimiz başka bir function daha yazıyoruz.

Sayfamızın CodeBehind kısmındada Repeater nesnesi ile databasedeki “Categories” tablosundaki kategori isimlerini buton nesneleri ile birlikte oluşturuyoruz.

Son olarak sayfamızı görüntülediğimizde hem butonlarla bir seçim yapabiliyoruz hemde Dropdown menü ile istediğimiz Kategoriye ait ürünleri görüntüleyebiliyoruz.
Hiç beklemeden sanki masaüstü uygulamasıymışcasına hızlı ve pratik

Umarım Yararlı olur 😉

M.Zeki Osmancık

XML ile Telefon Defteri Yapalım 3!! 618 381 mezo

XML ile Telefon Defteri Yapalım 3!!

Projemize kaldığımız yerden devam ediyoruz 😀
Kaydet işleminden farklı olarak mevcut olan kaydı düzenlemek için düzenleme butonumuzun Click olayına ilgili kodları yazıyoruz.

protected void Button2_Click(object sender, EventArgs e){

xmlDoc = new XmlDocument();

xmlDoc.Load(dosya);

XmlNode secilen = xmlDoc.SelectSingleNode(“Kisiler/Kisi[Ad='” + ListBox1.Text + “‘]”);

secilen[“Ad”].InnerText = TextBox1.Text;

secilen[“Soyad”].InnerText = TextBox2.Text;

secilen[“Telefon”].InnerText = TextBox3.Text;

xmlDoc.Save(dosya);

TextBox1.Text = “”;

TextBox2.Text = “”;

TextBox3.Text = “”;

TelefonlariYukle();

}

Farklı bir işlem yapmadık aslında. XmlNode iledüğümü belirledik ve InnerText ile o düğüm içersinde var olan veriyi almış olduk. Yeni değerleride yine InnerText ile yerine yazmış olduk. Bütün işlemleri element içersindeki düğümlerdeki bilgiler ile yaptık yeni kayıt için yeni düğümler ekledik mevcut düğümler ekledik. Silme işlemi içinde tabiki düğüm silmemiz gerekecek bunun içinde Sil butonuna…

protected void Button3_Click(object sender, EventArgs e){

xmlDoc = new XmlDocument();

xmlDoc.Load(dosya);

XmlNode secilen = xmlDoc.SelectSingleNode(“Kisiler/Kisi[Ad='” + ListBox1.Text + “‘]”);

xmlDoc.DocumentElement.RemoveChild(secilen);

xmlDoc.Save(dosya);

TextBox1.Text = “”;

TextBox2.Text = “”;

TextBox3.Text = “”;

TelefonlariYukle();

}

RemoveChild ile ChildNode dediğimiz seçilen düğümü silme işlemini gerçekleştirebiliyoruz.

Peki 3 temel işlemimiz bitti birde bu Xml sayfası içersinde arama yapmak istersek ?

Bunun içinde en alt kısma yerleştirdiğimiz Textbox ve Button ile bu işi çözebiliriz . Bu işlem içinde …

protected void Button4_Click(object sender, EventArgs e){

ListBox1.Items.Clear();

XPathDocument xp = new XPathDocument(dosya);

XPathNavigator xn = xp.CreateNavigator();

string sorgu = “Kisiler/Kisi[Ad='”+TextBox4.Text+”‘]/Ad”;

XPathNodeIterator ni = xn.Select(sorgu);

while (ni.MoveNext())

{

ListBox1.Items.Add(ni.Current.ToString());

}

}

İşte Xml i veritabanı olarak kullanarak yaptığımız çok basit bir telefon defteri 😉

Güle Güle kullanın 😀

Projeyi İndirebilmek için Tıklayın!!

Bilgiyle Kalın …

M.Zeki Osmancık

XML ile Telefon Defteri Yapalım 2!! 675 378 mezo

XML ile Telefon Defteri Yapalım 2!!

Bir önceki yazının devamı olarak bu yazımızdada projemizi geliştirmeye devam ediyoruz.

Listbox a kayıtlarımızı ekledikten sonra listbox üzerinde bir kaydı seçtiğimizde bilgilerin ilgili textbox lara yazılmasını istiyoruz bunun içinde Listbox kontrolünün SelectedIndexChanged olayına ilgili kodları yazıyoruz.

protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e){xmlDoc = new XmlDocument();

xmlDoc.Load(dosya);

XmlNode secilen = xmlDoc.SelectSingleNode(“Kisiler/Kisi[Ad='” + ListBox1.Text + “‘]”);

TextBox1.Text = secilen[“Ad”].InnerText;

TextBox2.Text = secilen[“Soyad”].InnerText;

TextBox3.Text = secilen[“Telefon”].InnerText;

}

Bu işlemden sonra projemizde bir adım daha atmış oluyoruz ve her kaydı seçtiğimizde o kayıtla ilgili tüm bilgiler ilgili textboxlara yazılıyor. Bu bize Update işleminde çok büyük kolaylık sağlayacak.

İlk olarak Kaydet butonunu işlevine kavuşturalım. Ve buton1 in Click olayına ilgili kodları yazalım.

protected void Button1_Click(object sender, EventArgs e){xmlDoc = new XmlDocument();

xmlDoc.Load(dosya);

XmlElement xe = xmlDoc.CreateElement(“Kisi”);

XmlNode ad = xmlDoc.CreateNode(XmlNodeType.Element,”Ad”,””);

XmlNode sAd = xmlDoc.CreateNode(XmlNodeType.Element, “Soyad”, “”);

XmlNode tel = xmlDoc.CreateNode(XmlNodeType.Element, “Telefon”, “”);

XmlAttribute xa = xmlDoc.CreateAttribute(“Tur”);

xa.Value = “Cep”;

tel.Attributes.Append(xa);

ad.InnerText = TextBox1.Text;

sAd.InnerText = TextBox2.Text;

tel.InnerText = TextBox3.Text;

xe.AppendChild(ad);

xe.AppendChild(sAd);

xe.AppendChild(tel);

xmlDoc.DocumentElement.AppendChild(xe);

xmlDoc.Save(dosya);

TextBox1.Text = “”;

TextBox2.Text = “”;

TextBox3.Text = “”;

TelefonlariYukle();

}

XmlElement: Xml dosyası içersinde bulunan bir elemanı temsil eder.

XmlNode: Eleman içersindeki her bir düğümü temsil eder.

XmlAttribute : Düğümlerin sahip olduğu özellikleri temsil eder.

Görüldüğü üzere Xml dosyamızı bir database gibi kullanarak kayıtları görüntüleyip yeni kayıtları Xml üzerine yazabiliyoruz.

Bilgiyle Kalın…

M.Zeki Osmancık

XML ile Telefon Defteri Yapalım !! 410 256 mezo

XML ile Telefon Defteri Yapalım !!

Merhaba arkadaşlar bir önceki yazımızda XML nedir nasıl kullanılır ile alakalı bilgi vermiştik.Bu yazımızda sizlerle C# ile Xml ortak yapımı bir proje yapacağız. Bu web projemizde Xml dosyasını bir database gibi kullanarak kayıt yapacağız, kayıt okuyup, sileceğiz.

Öncelikle resimdeki gibi  4 TextBox , 4 buton, 1 Listbox dan oluşan formu tasarlıyoruz.

Bu formu tasarladıktan sonra projemizle birlikte kullanacağımız Xml dosyamızı yaratarak içersindeki düğümleri oluşturmamız gerekiyor.

Bu xml dosyası bizim veritabanımız olacak.

Genel hazırlıkları tamamladıktan sonra kodlama kısmına geçelim. İlk olarak bilmemiz gereken bir nesnemiz var  XMLDocument  nesnesi bu nesne xml dosyasını  önbellek üzerinde çalışılabilir hale getirerek işimizi kolaylaştırır.Önce bu nesneyi global seviyede tanımlayarak başlayalım.

XmlDocument xmlDoc;

Bu nesneden sonra yine tüm proje içersinde kullanabilecek bir değişken olan xml dosya yolunu tutacağımız bir string değişken tanımlayarak sayfanın yüklenmesi sırasında bu yolu değişkene atamalıyız.

dosya = Server.MapPath(“Telefon.xml”);

Dosya değişkenine yolu atadıktan sonra XML dosyamız üzerindeki kayıtları okuyarak Listbox nesnemiz üzerine yazdıracak bir metot yazalım.

void TelefonlariYukle(){ListBox1.Items.Clear();

XPathDocument xp = new XPathDocument(dosya);

XPathNavigator xn = xp.CreateNavigator();

string sorgu = “Kisiler/Kisi/Ad”;

XPathNodeIterator ni = xn.Select(sorgu);

while (ni.MoveNext())

{

ListBox1.Items.Add(ni.Current.ToString());

}

}

XPathDocument : Xpath data modeli kullanılan okuma yöntemlerinde Xml dosyalarından daha hızlı okuma sağlar.

XPathNavigator : Verilerin üzerinde bir izleme oluşturur ve XML belgesi içinde bu izlenecek olanları görüntüler.

XPathNoteIterator:Seçilen düğümler üzerinde bir yineleme sağlar.

Bu işlemi yaptıktan sonra listbox nesnesi üzerine Xml dosyası üzerindeki Ad düğümüne yazılmış kayıtlar tek tek gelecektir.

Bu kadar değil devam edecek 😉

Bilgiyle Kalın…

M.Zeki Osmancık

XML Nedir? 288 116 mezo

XML Nedir?

Merhaba arkadaşlar bu yazımızda XML yapısını açıklamaya çalışacağım.

Öncelikle XML in ne olduğundan başlayalım. Her ne kadar bilgisayar kullanan herkes bir şekilde XML dosyaları ile çalışıyor olsada nasıl bir yapı olduğunu ve nasıl kullanılabileceğini kestiremeyebilir zaten çoğu kimse kullandığı hazır programlar sayesinde XML ile çalışıyor.En basiti bir otel her gece emniyete otelde konaklayanların listesini emniyetin ona vermiş olduğu program ile göndermek zorunda. Göndermek zorunda olduğu dosya XML dosyasıdır bunun gibi bir çok örnekte göreceğimiz gibi XML yaygın bir iletişim dosyası.

XML (Extensible Markup Language) bir programlama dili değildir. Sadece markup yani işaretleme dilidir. Markup dillerine örnek olrak HTML,WML vs.. verilebilir. Bu dillerde veriler bazı işaretlerle (etiket) işaretlenirler. Örneğin bir HTML kodunda bir başlık yazısı <h1> etiketi ile işaretlenir. Sonuç olarak bir belgedeki verileri işaretlemeye yarayan dillere markup dilleri denir.

W3C ( World Wide Web Consortium) organizasyonu tarafından tasarlanan ve herhangi bir kurumun tekelinde bulunmayan XML kişilerin kendi sistemlerini oluşturabilecekleri kendi etiketlerini tanımlayarak çok etkin ve rahat kullanabilecekleri ve bu belirlenen etiketleri kendi yapıları içersinde standardize edebilecekleri esnek , genişleyebilir ve kolay uygulanabilir bir meta dilidir.

Farklı tipteki verileri orjinal formatlarında tek bir havuzda tutabilen XML veriye hızlı kolay ve ortamdan bağımsız olarak erişebilme imkanı sunar.

Öncelikle veri transferinin kolaylaşmasını ve verinin içerik bilgisiyle saklanabilmesini hedefleyen XML, içerik ve sunum bilgilerini birbirinden ayırır. Bu özelliği ile de HTML’den farklılaşır.

  • XML bir document’in(belgenin) yapısını ve görünümünü tanımlamak için kullanılan uluslararası bir standartdır.
  • XML (Extensible Markup Language – Genişletilebilir İşaretleme Dili) yapılandırılmış belge ve verilerin evrensel formatıdır
  • XML text tabanlı markup dilidir ve data alış verişinde kullanılan bir standard’ır
  • XML bilginin yapısını tanımlamak için kullanılan bir teknolojidir.
  • XML bilgiyi tanımlayan ve web’te bilgi alış verişi için kullanılan standard bir biçimdir.
  • XML markup dillerini tanımlayan bir metadilidir.
  • XML verinin yapılandırılması ve tanımlanması için kullanılan bir teknolojidir.
  • XML herhangi bir verinin biçimlenmesi,tanımlanması için kullanılan bir teknolojidir.

Yukarıdaki tanımlar birbirine benzemektedir. Bazı kelimeler veri, tanımlama,standart vs.. gibi çok fazla kullanılmış. Tanımlardaki bir farklılık XML’in hem bir teknoloji hem de bir dil olmasından doğmaktadır. Bazı tanımlar sadece XML teknolojisini tanımlarken bazıları dil olarak XML’i tanımlamışlar.

Bütün bu tanımlardan şu sonuçlar çıkarılabilir

  • XML hem bir teknolojidir hem de bir dildir
  • XML dil olarak markup dil’leri yaratmaya yarar.
  • XML verileri tanımlamak için kullanılan bir teknolojidir.
  • XML verileri tanımlamak için bir standart oluşturmak için yaratılmıştır.
  • XML verileri standart bir şekilde tanımladığından web’te veya herhagi iki program arasında veri alış verişi kolaylaştırmaktadır.

Şimdi kendi arkadaşlarımızın ad soyad ve telefon bilgilerini tutabildiğimiz bir XML dosyası oluşturalım.

Kendi kurallarımıza göre oluşturacağımız bu XML dosyasında etiketlerimiz Ad , Soyad ve Telefon olsun ayrıca Telefon etiketinin özelliklerini belirlemek için Tur adında bir Attribute tanımlayalım. Öncelikle XML dosyamızda o belgenin XML olduğunu ve versiyonunu dil desteğini belirten bir satır bulunmak zorunda.  Ve mutlaka bir root (Ana ,Kök) node olmak zorunda.

Kök node u tanımladıktan sonra her bir kişi için ayrı node’larımız olmak zorunda.

Her kayıt için bir node için içersinde tutacağımız bilgilerin etiketlerini tek tek tanımlamalıyız.

Bu şekilde Xml dosyamız içersine bir kişinin kaydını girmiş oluyorum. Eğer eklemiş olduğum etiketlerin bir özelliğini tanımlamak istersem o zamanda bir Attribute (Öznitelik) tanımlamam yeterli olacak.

Umarım yararlı olur bir sonraki yazımda görüşmek üzere.

Bilgi ile Kalın!!!

M.Zeki Osmancık

    Join our Newsletter

    We'll send you newsletters with news, tips & tricks. No spams here.