Selamlar,

XmlHttpRequest; Microsoft'un dünyaya (bayağı bir zaman oldu ama) dinamik internet sayfalarını armağan etme yoludur. Bu özellikten vaz geçmek istediğiniz anda, statik sayfalara geri dönmüş oluyorsunuz. Asenkron ya da senkron olarak yüklenmiş olan sayfada dinamik içerik hazırlamaya yarar. Ajax dediğimiz dünya zaten bu komut üstüne kurulmuştur desek yerinde bir tespit olur. Eğer javascript ile istemci (client) tarafında sunucudan (server) dinamik olarak içerik almak ve işleyip kullanıcıya sunmak istiyorsak bukomutu kullanmak isteriz.

Bildiğimiz ve hergün acı olarak tecrübe ettiğimiz gibi internet için çok sayıda standart var ama hiç standart yok! Ne demek bu? Biri birşey yaratıyor, başkaları alternatiflerini üretiyor sonra içlerinden bir ya da birkaçı tutuyor ve internet standardı olma yolna giriyor, sonra üretenler aralarında konuşup bunu standart haline getiriyorlar ama bu seferde hepsinin yoğurt yeme stili farklı oluyor. Çok uzattım ama ne yazık ki bu komut için de bu olay geçerli. Eğer XmlHttpRequest kullanmak istiyorsanız, Javascript ile bu komutu bir nesne gibi yaratmanız gerekiyor ve her tarayıcıda (browser) bu işlem farklı oluyor. Microsoft bunu daha önceden ActiveX nesnesi olarak tanıtmıştı mesela...

Aşağıdaki kod ile XmlHttpRequest nesnenizi tanımlayabilirsiniz:

<script type="text/javascript" language="javascript">
    var xmlhttp = false;

    function getHttpRequestObj()
    {
        try
        {
            //bir deneyelim bakalim
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        {
            try
            {
                //simdi guncel IE implementasyonu deneyelim
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e)
            {
                xmlhttp = false;
            }
        }
       
        if(!xmlhttp && typeof XmlHttpRequest!= 'undefined')
        {
            //Eh, artik mozilla tabanli bir tarayici kullaniyoruzdur
            //o zaman ona gore bir nesne tanimlayalim
            xmlhttp = new XmlHttpRequest();
        }
    }
</script>

 

Şimdi bu script ile sayfa içerisinde kullanabileceğimiz xmlhttp adında bir XmlHttpRequest nesnemiz oldu. Artık bununla istediğimiz gibi text, xml ya da json tabanlı içerikler alabilir ve işleyebiliriz. İşin doğrusu benim favorim JSon, çünkü xml'den de text'den de çok daha verimli ve performanslı. Üstüne üstlük geri dönen değer direk olarak javascript nesnesi olarak kullanılabiliyor yani bir daha işlemeye gerek kalmıyor.

 

Bir örnek vereyim. Bir sayfanızda, sayfanızla aynı klasörde bulunan bir txt dosyasından içerik almak ve göstermek istiyorsunuz diyelim:

getHttpRequestObj();

if(xmlhttp)
{
    xmlhttp.open("GET", "Deneme.txt", true);
    xmlhttp.onreadystatechange = function()
    {
        if(xmlhttp.readystate == 4)
        {
            alert(xmlhttp.responseText);
        }
    }
    xmlhttp.send(null);
}

 

Yukarıdaki örnekte, sayfamızla aynı klasörde bulunan Deneme.txt adlı dosyamızı çağırdık ve içeriğini mesaj kutusuyla gösterdik. Bunu yaparken bazı şeyler yaptık,onları da açıklayayım.

Öncelikle xmlhttp.onreadystate - function()... diye bir komut yazdık. Bu resmen bir event'i handle etmekti. Yani tanımlamış olduğumuz bir başka fonksiyon varsa onu da gösterebilirdik bu event için. Ayrıca xmlhttp.readystate diye bir değişkenin değerinin 4 olup olmadığına baktık, bu da xmlhttp nesnesinin durumunu kontrol etmek içindi. Tahmin ettiğiniz üzere 4 değeri 'tamamlandı' anlamına geliyor.

Diğer durumlarda şöyle:

0 - Henüz hazırlanmadı (Uninitialized)

1 -  Yükleniyor (Loading)

2 - Yüklendi (Loaded)

3 - Etkileşimli (Interactive)

4 - Tamamlandı (Complete)

 

Evet, şu anda bu kod çalışır durumda. Ama henüz gerçek dünyada kullanılabilecek düzeyde değil. Neden mi? Mesela bazen bazı kaynaklara ulaşmakta problemler yaşanır, bu durum için herhangi bir önlem almadık bu kodda. Bunu da ekleyelim şimdi:

if(xmlhttp)
{
    xmlhttp.open("GET", "Deneme.txt", true);
    xmlhttp.onreadystatechange = function()
    {
        if(xmlhttp.readystate == 4)
        {
            if(xmlhttp.status == 200)
            {
                alert(xmlhttp.responseText);
            }
            else
            {
                alert("Aman Allahim! Problem Oldu...");
            }
        }
    }
    xmlhttp.send(null);
}

 

Evet, burada xmlhttp.status == 200 diye bir kontrol eklemiş olduk, bu da tahmin ettiğiniz gibi http için status değeridir. Misal, eğer dosya bulunamamış olsaydı 404 değerini alacaktık, ya da sunucu hatası olsaydı 500 alacaktık. Bunlar için de kontroller ekleyebilirsiniz.

 

Esasen kendi sitenizde barındırdığınız ve kontrol etmiş olduğunuz şeylere erişim sorunu yaşamazsınız ancak dışarıdaki bir kaynağa erişmeye çalışırken bu tür durumlar için dikkat etmek gerekir (Bence içeride de olsa dikkat etmekte yarar var, çünkü bazen bir içeriği değiştirirken ya da bir şeyin yerini değiştirirken nerelerde kullanıldığını unutabiliriz).

Tabi bu örnekte kullandığımız gibi sadece text dosyaları için kullanılmıyor bu komut, yukarıda da belirttiğim gibi xml gibi içeriklerde kullanılabilir ki sadece dosya olarak da kullanılmıyor, misal bir web servis de kullanabilirdik.

 

Düşünelim. Bir web servisimiz olsa, içinde veritabanımızdan bir liste çeksek ve xml olarak fonksiyondan geri döndürsek, bunu da xmlhttp nesnemizle belirli zaman aralıklarıyla çekip çekip kontrol etsek? Evet, bu yapılan birşey ve kullanım alanlarından biri. Bu gibi durumlarda en yukarılarda da yazdığım gibi xml yerine JSon tavsiye ediyorum, çünkü xmlden çok daha az yer tutuyor bu da veriyi daha çabuk elde etmek, kullanılan bant genişliğini düşürmek gibi anlamlara geldiği gibi ayrıca bir de JSon tipini XML gibi işlemek zorunda kalmadan eval komutuyla direk olarak bir javascript değişkenine atayıp kullanabiliyoruz. Evet işte bu gerçekten süper bir durum. Örnek vereyim.

Bir dosyamız olsun yine (Örnek kolay olsun diye böyle yapıyorum), adı da Deneme2.txt olsun. İçine de aşağıdaki gibi birşey yazalım.

{ "Results": {
    "toplam_kitap" : "2",
    "kitap" : [
    {
        "Yayinevi" : "Ayrinti",
        "Tur" : "Yeralti Edebiyati",
        "Fiyat" : "10"
    },
    {
        "Yayinevi" : "Can",
        "Tur" : "Dunya Klasigi",
        "Fiyat" : "7"
    }
         ]
          }
}

 

Bu dosyayı kaydedelim. Ve aşağıdaki kodu html kodumuza yazalım:

<script type="text/javascript" language="javascript">
    var xmlhttp = false;

    function getHttpRequestObj()
    {
        try
        {
            //bir deneyelim bakalim
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        {
            try
            {
                //simdi guncel IE implementasyonu deneyelim
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e)
            {
                xmlhttp = false;
            }
        }
       
        if(!xmlhttp && typeof XmlHttpRequest!= 'undefined')
        {
            //Eh, artik mozilla tabanli bir tarayici kullaniyoruzdur
            //o zaman ona gore bir nesne tanimlayalim
            xmlhttp = new XmlHttpRequest();
        }
    }

    getHttpRequestObj();

    function CallBack()
    {
        if(xmlhttp)
        {
            xmlhttp.open("GET", "Deneme2.txt", true);
            xmlhttp.onreadystatechange = function()
            {
                if(xmlhttp.readystate == 4)
                {
                    if(cmlhttp.status == 200)
                    {
                        eval("var objResults = " + xmlhttp.responseText);
                        var displayText;
                        for(var i=0; i < objResults.Results.kitap.length; i++)
                        {
                            displayText += objResults.Results.kitap[i].Yayinevi + " " +
                                    objResults.Results.kitap[i].Tur + ", " +
                                    objResults.Results.kitap[i].Fiyat + "TL<br/>";
                        }
                        alert(displayText);
                    }
                    else
                    {
                        alert("Aman Allahim! Problem Oldu...");
                    }
                }
            }
            xmlhttp.send(null);
        }
    }
    CallBack();
</script>

 

Evet, işte bu kadar basit. Tabii biz burada Deneme2.txt diye bir dosya yarattık ve elimizle doldurduk ama dediğim gibi bu örneğin maksadı XmlHttpRequest'i göstermekti bu sebeple diğer detaylarla boğmak istemedim yazıyı. Normalde bir web servis hazırlamak ve geri dönecek değeri JSon tipine parse etmek gerekecekti. Bunlar için de aşağıda kısayollar vereceğim.

 

Bütün bunların yanı sıra birkaç detay daha vermek istiyorum. Mesela hazırladığımız Deneme2.txt dosyasının formatı JSon ama bu JSon da '{' ya da '[' ne anlama geliyor?

Object(s): '{}' ile başlayıp bitiyorlar.

Object Member(s):  Bunlar name - value eşlemesi olarak yer alıyorlar. Name ve value arasında ':'kullanılıyor ve diğer üyeler arasında ise ',' kullanılıyor

Array(s): Bunlar string, number, object, array veya literal value (true, false) ya da null olabiliyorlar.

String(s): Bildiğimiz string.

 

Bunun yanı sıra  bir de XmlHttpRequest nesnesinin metodları (methods) ve özelliklerinden (properties) de bahsetmek istiyorum.

Methods:

- abort()

     İsteği iptal eder.

- getAllResponseHeaders()

     Bütün Http Header değerlerini getirir.

- getResponseHeader()

     Belirtilen Http Header değerini getirir.

- open()

     İstek nesnesini belirtilen metod, url ve güvenlik bilgileriyle yapılandırır. (Yukarıda hep tek parametreli olarak kullandık ancak ilk parametrede açılacak kaynağı belirttikten sonra kullanıcı adı ve şifre de belirtebilir ve güvenlik için giriş yapabilirdik).

- send()

     Sunucuya bi istek gönderip cevap alır.

- setRequestHeader()

     Bir Http header'ın değerini değiştirir.

 

Properties

- onReadyStateChange (Okuma / Yazma)

      ReadyState değiştiğinde tetiklenecek olan event için kullanılacak olan fonksiyonu değiştirir.

- readyState (Okuma)

     Nesnenin mevcut durumunu alır.

- responseBody (Okuma)

     Http response için kullanılabilecek özelliklerden biri.

- responseStream (Okuma)

     Http response için kullanılabilecek özelliklerden biri.

- responseText (Okuma)

     Response body, string formatında.

- responseXML (Okuma)

     Response body, xml formatında.

- status (Okuma)

     İstek için geri dönen durum değeri (200 = OK, 404 = Yok, 500 = server hatası, ...)

- statusText (Okuma)

     İstek için geri dönen durumun text'ini döndürür.

 

Şimdilik bu kadar. Bu konuda daha çok yazı yazmaya ve örnekler vermeye çalışacağım.

Bu konularda bakımlası gereken bazı siteler:

http://www.json.org

http://www.json.com

http://blogs.techrepublic.com.com/security/?p=426

Siteleri takip ederken artık tek tek gezmek yerine rss gibi yenilikler kullanmaya başladık. Eh, hazırladığımız sitelere bunları eklemenin asp.net 3.5 ile çok kolay bir yolu var, Wcf Syndication Service Library! Wcf hakkında neredeyse hiçbir şey bilmenize gerek yok, hatta hiç yok. Zaten Visual Studio size gerekli bütün kodu veriyor, tek yapılması gereken listeye maddeleri eklemek.

Bir örnek vereyim.

1. Visual Studio 2008'de yeni bir proje yaratmak için açılan pencereden WCF - Syndication Service Library'yi seçin, projenize istediğiniz ismi verin ve projenizi yaratın.

2. Aşağıdaki kodu elde etmiş olacaksınız

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Syndication;
using System.ServiceModel.Web;
using System.Text;

namespace SyndicationServiceLibrary1
{
    // NOTE: If you change the class name "Feed1" here, you must also update the reference to "Feed1" in App.config.
    public class Feed1 : IFeed1
    {
        public SyndicationFeedFormatter CreateFeed()
        {
            // Create a new Syndication Feed.
            SyndicationFeed feed = new SyndicationFeed("Feed Title", "A WCF Syndication Feed", null);
            List<SyndicationItem> items = new List<SyndicationItem>();

            // Create a new Syndication Item.
            SyndicationItem item = new SyndicationItem("An item", "Item content", null);
            items.Add(item);
            feed.Items = items;

            // Return ATOM or RSS based on query string
            // rss -> http://localhost:8731/Design_Time_Addresses/SyndicationServiceLibrary1/Feed1/
            // atom -> http://localhost:8731/Design_Time_Addresses/SyndicationServiceLibrary1/Feed1/?format=atom
            string query = WebOperationContext.Current.IncomingRequest.UriTemplateMatch.QueryParameters["format"];
            SyndicationFeedFormatter formatter = null;
            if (query == "atom")
            {
                formatter = new Atom10FeedFormatter(feed);
            }
            else
            {
                formatter = new Rss20FeedFormatter(feed);
            }

            return formatter;
        }
    }
}

3. Yukarıdaki kodun bir kısmını aşağıda tekrar veriyorum, tek yapılması gereken onu değiştirmek.

// Create a new Syndication Item.
SyndicationItem item = new SyndicationItem("An item", "Item content", null);
items.Add(item);

Burada misal veritabanından gerekli verileri çekip istediğiniz gibi item(lar) yaratın. null değeri gördüğünüz alana eğer bir link yazarsanız, rss'i takip edenlerin konuyla alakalı içeriğinize ulaşabilmeleri için bir link de yaratılıyor.

Eğer resim eklemek ya da satır atlamak istiyorsanız; "Item Content" kısmına, istediğiniz şeylerle alakalı html kodu yazabilirsiniz. Bu sayede daha iyi bir görüntüde elde edersiniz.

Misal vereyim:

SyndicationItem item = new SyndicationItem("Başlık 1!", "<font face=\"Arial\" Size=\"2\">Deneme<br/><a href="www.tamiyi.com>www.tamiyi.com</a><br/><img src=\"www.site.com/resim.gif\"/> ", "http://www.tamiyi.com");

Bu kadar basit!

 

Bunu publish ettiğinizde gayet hızlı ve başarılı bir çözüm elde etmiş olursunuz. Artık tek yapmanız gereken link vermek istediğiniz yerlere link vermek.

Bunu da:

Rss için: http://.../SyndicationServiceLibrary1/Feed1/

Atom için:  http://.../SyndicationServiceLibrary1/Feed1/?format=atom

Adresleri ile yapabilirsiniz.

 

Eğer tarayıcıların (browser) sitenizde rss ya da atom gibi bir syndication özelliği olduğunu anlamasını istiyorsanız Hazırlanan rss feed'i tarayıcının otomatik olarak bulması nasıl sağlanır? başlıklı yazımı okumanızı tavsiye ederim.

Birçok alanda kullanıcının doldurduğu alanları kontrol etmek isteriz. Misal olarak kullanıcının bir web sitesine kayıt olmak istemesi durumunda, bu kullanıcı adının ya da belirtilen e-posta adresinin daha önce sisteme kayıt edilmiş olup olmadığını kontrol etmek ve buna göre kullanıcıyı yönlendirmek isteriz. Bu gibi durumlarda server side kontrol etmek çok da istenen bir durum olmaz, çünkü sayfanın tekrar çalıştırılması anlamına geldiği için yavaşlık olur ve hatta kullanıcının o esnada doldurduğu bazı alanlar da silinebilir. En doğru yöntem javascript vasıtasıyla web service ve ajax kullanarak client side bu işi çözmek gözüküyor.

Bir örnek ile kullanımını anlatmaya çalışacağım. Mesela senaryomuzda bir websitesinin kayıt işlemi için kullanıcı e-posta adresini belirtiyor olsun, bu e-posta adresi sisteme kayıtlı mı bunu belirlemek isteyelim. Tabi bir de girilen e-posta adresi doğrumu ona da bakalım. E-posta adresinin format'ının doğru olup olmadığının kontrolü sayesinde web service'imizide gereksiz zamanlarda çağırmamıza gerek kalmadığı için site trafiğini de azaltabiliriz.

1. adım: Bir web service ekleyelim projemize, mesela UserService.asmx olsun ve aşağıdakine benzer bir  koda sahip olmamız gerekiyor. Burada dikkat edilecek husus [System.Web.Script.Services.ScriptService] satırının kesinlikle eklenmiş olması, yoksa ajax ya da script vasıtasıyla çağırılmasına izin verilmez.

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Services;
using System.Web.Security;

[WebService(Namespace = "http://www.tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class UserServices : System.Web.Services.WebService {

    public UserServices () {

    }

    [WebMethod]
    public bool IsUsernameAvailable(string CheckFor) {
        if (Membership.GetUser(CheckFor, false) == null)
            return true;
        else
            return false;
    }
}

3. adım: Bir sayfa yaratalım. Mesela default.aspx olsun.

4. adım: Bu sayfaya bir ScriptManager ya da ToolkitScriptManager ekleyelim.

5. adım: Eklediğimiz ScriptManager'ın services özelliğine yarattığımız web service'i ekleyelim. Ekledikten sonra aşağıdakine benzer bir kod elde edilmiş olması gerekiyor.

<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
   <Services>
      <asp:ServiceReference Path="~/services/UserServices.asmx" />
   </Services>
</cc1:ToolkitScriptManager>

6. adım: Sayfamıza bir TextBox ekleyelim  adını txtEmail koyalım ve bir Label koyalım adını da lblErr koyalım.

7. adım: Sayfamızın Page_Load event'ine aşağıdaki kodu koyalım.

txtEmail.Attributes.Add("onkeyup", "checkName()");

8. adım: Sayfamızın koduna aşağıdaki javascript'i ekleyelim.

    <script type="text/javascript">
        function checkName() {
            var eml = document.getElementById(<% ="\'" + txtEmail.ClientID + "\'" %>);
            var regexf  =  /(^[a-z]([a-z_\.]*)@([a-z_\.]*)([.][a-z]{3})$)|(^[a-z]([a-z_\.]*)@([a-z_\.]*)(\.[a-z]{3})(\.[a-z]{2})*$)/i;

            if(regexf.test(eml.value))
            {
                UserServices.IsUsernameAvailable(eml.value, onIsAvailableCompleted);
            }
        }
        function onIsAvailableCompleted(result) {
            if(result != null)
            {
                alert(result);
                var lblErr = document.getElementById(<% ="\'" + lblErr.ClientID + "\'" %>);
                if(result)
                {
                    lblErr.innerText = 'E-postaniz kontrol edildi.';
                    lblErr.style.color='green';
                    }
                else
                {
                    lblErr.innerText = 'Bu kullanici zaten mevcut, baska bir kullanici deneyin.';
                    lblErr.style.color='red';
                    }
            }
        }

    </script>

 Bu kadar. checkName fonksiyonu içine yazdığımız regexf değişkeni e-posta için validator olarak kullanılıyor ve txtEmail içine kullanıcının yazmış olduğu yazının format'ını kontrol ediyor, eğer doğru bir e-posta formatındaysa o zaman web service'in IsUsernameAvailable fonksiyonunu çağırıp lblErr içine gerekli yazıyı yazıyor. Bu örnek geliştirilebilir tabii. Misal olarak eğer doğru ve kullanılabilir bir e-posta adresi belirtilmemiş ise submit butonunun enabled değeri false olarak işaretlenebilir ve formun submit edilmesi engellenebilir.

Bu tür işlerin istemci tarafında çözülmesi hem performans hem de trafik açısından daha doğru oluyor.

Düzeltme: Bu yazıdaki RegEx kodu eski kaldı bu sebeple RegEx ile E-Posta uygunluk kontrolü için kod başlığıyla yazdığım yazıyı okumanızı tavsiye ederim. Merak etmeyin kısa tuttum ve kodu hemen görebilirsiniz orada.

Öyle işte.

Bir web uygulaması hazırlarken genellikle direk olarak veritabanına bağlanmak istemeyiz. Bazen verilerin üstünde değişiklikler yapmak için, bazen güvenlik nedeniyle, bazen de başka sebeplerle bunu istemeyiz. Bir DropDownList'i web service ile doldurmak istediğimizde önümüzde pratik olan iki yol var. Tabii öncelikle kullanacağımız web service'i projeye eklememiz gerekmektedir.

Birinci yol kod ile yapılır.

Dropdownlist'i doldurmak istediğimiz durumda çalışan fonksiyon içerisine (Mesela: Form_Load) aşağıdakine benzer bir kod ve web service'ten geri dönen listedeki özelliklerden kullanmak istediklerimizin isimlerini DropDownList'in DataTextField ve DataValueField'ine yazarız.

 WebServisim wbs = new WebServisim();

 DropDownList1.DataSource = wbs.Fonksiyonum();

 DropDownList1.DataBind();

İkici yol ise ObjectDataSource kullanarak yapılır.

Öncelikle bir ObjectDataSource yaratırız.

Daha sonra DropDownList'in DataSource'u olarak bu yarattığımız ObjectDataSource'u seçeriz ve DataTextField ve DataValueField değerlerine istediğimiz kolon isimlerini yazarız.

Bu kadar basit.

Merhaba,

N-tier bir uygulama geliştiriyorsunuz ve haklı olarak kullanacağınız class libraryler var. Hatta bu class libraryler ile web servicelerine ulaşmak istiyorsunuz ama bunu .net 3+ ile yapıyor olduğunuz için web reference olarak değil de web service olarak projenize eklemek ve kullanmak istiyorsunuz (SoapClient kullanmak istiyorsunuz yani). Netice de class library'nizi bir windows application'a bağladınız diyelim. Solution'ınızı compile ediyorsunuz ve hiç sorun yok, işte o an geldi, artık çalıştırma zamanı... Çalıştırıyorsunuz ve işte o hiç beklemediğiniz hata tam da karşınızda duruyor "Could not find default endpoint element that references contract...".

Hiç uğraşmayın ben 3 saat kadar aradım internette sonucunu bulamadım (belki iyi bir google aramasında 30. sayfada vardır çözümü, o kadar bakmadım ne yalan söyleyeyim...) Çözüm işte burda :-)

 

Web service'inizi gösterdiğiniz class library projenizin içinde bir app.config dosyası bulunuyor, bu dosyanın içerisinde de eklediğiniz web service ile alakalı satırlar var. İşte bu satırları kopyalayıp, class library'nizi reference olarak eklediğiniz windows application project'iniz varya, onun içindeki app.config dosyasının içine yapıştırıyorsunuz.

 

 

Bitti... Çözüm bu kadar basit :-)

 

Umarım yardımcı olabilmişimdir bu yazıyı okuyanlara. Eğer karşılaştığınız sorunlar olursa mail atarsanız en kısa zamanda cevaplarım :-)