Farklı web sitelerinde AJAX ile sunucudan istemciye veri yükleme teknikleri kullanmak performans açısından ciddi faydalar sağlarken bazen kontrolün elden çıkmasına da neden olabiliyor. Herhangi bir AJAX yüklemesi, yani XMLHttpRequest gerçekleşirken sunucu ile istemci arasında bir trafik sorunu oluştuğunda sitemizin ziyaretçisi çaresizce AJAX yüklemesinin bitmesini bekliyor. Oysa o yükleme hiç bitmeyecek. Bir diğer senaryoda ise gerçekten sayfaya uzun sürecek bir bilgi yükleniyor olabilir, bu durumda da aslında ziyaretçimize gerektiğinde bu yüklemeyi iptal etme şansı tanıyabiliriz. İşte tüm bu işlemleri istemci tarafında direk JavaScript kodları yazarak nasıl yapabileceğimizi makalemiz boyunca inceliyor olacağız.

Gelin ilk olarak kullanacağımız örneğimizin sayfa tasarımını, mark-up HTML kodunu oluşturalım.

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server"></asp:Label><br />
                    <asp:Button ID="Button1" runat="server" Text ="Yükle" OnClick="button1_Click" />
                    <asp:Button ID="Button2" style="visibility:hidden;"
                            runat="server" Text="İptal" />
                </ContentTemplate>
            </asp:UpdatePanel>

Sayfamıza yerleştirdiğimiz UpdatePanel içerisinde toplam iki adet düğme bulunuyor. Bu düğmelerden ilkini yükleme işlemini başlatmak için, ikincisini ise iptal etmek için kullanacağız. İptal etmek için kullanacağımız Button2 düğmesinin ilk başta görünmez olması için CSS özelliği olarak visibility değerini hidden şeklinde düzenliyoruz. İleriki kodlarımızda herhangi bir yükleme başladığında iptal düğmesini görünür hale getireceğiz. Düğmelerimizin yanı sıra sayfaya bir de Label1 adında etiket ekledik, bu etiket üzerine farklı mesajlar yazdırıyor olacağız.

Partial Class _Default
    Inherits System.Web.UI.Page
 
    Protected Sub button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
        label1.Text = Date.Now.ToLongTimeString
    End Sub
End Class

Sayfamızın Code-Behind kısmında sadece yukarıdaki kodu kullanacağız. Button1, yani yükleme işlemini yapacak olan düğmemize tıklandığında ilk olarak 3 saniye süreyle mevcut Thread'i uykuya alıyoruz. Böylece örneğimizi denediğimizde AJAX yüklemesi üç saniye sürecek. Tabi siz bu kodu gerçek projelerinizde kullanmamalısınız. Bizim örneğimizde gerçek bir yükleme söz konusu olmadığı için kodumuzu simülasyon amacıyla düzenledik. Yükleme işleminin sonunda Label1 içerisine mevcut saat bilgisini yazdırıyoruz.

AJAX sunucu kontrolleri kullanılacak her sayfada bir ScriptManager bulunması gerektiğine dair kuralı hepimiz biliyoruz. Bunun nedeni sayfa içerisindeki tüm AJAX işlemlerinden ScriptManager'ın sorumlu olması ve tüm işlemlerin ScriptManager'ın kontrolünde ilerliyor olması. Bu durumda biz de işlemlerin iptali gibi konularda ScriptManager ile çalışmak durumundayız. Buradan itibaren yazacağımız tüm kodlar JavaScript kodları olacak, fakat her zamanki gibi kodlarımızı sayfanın Header (Baş) kısmına yazma şansımız yok. Yazacağımız tüm JavaScript kodları ScriptManager ile gelen JavaScript özelliklerini kullanacağı için sayfada da ScriptManager'dan sonra yer almaları gerekiyor. Kabaca yapımız aşağıdaki şekilde olacak.

<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <script type="text/javascript" language="javascript">
        //JavaScript kodlarımız buraya
        </script>
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server"></asp:Label><br />
                    <asp:Button ID="Button1" runat="server" Text ="Yükle" OnClick="button1_Click" />
                    <asp:Button ID="Button2" style="visibility:hidden;"
                            runat="server" Text="İptal" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>

Gelelim yazacağımız JavaScript kodlarına ve anlamlarına. İlk olarak sayfamızdaki ScriptManager'a gelen her AJAX isteğini kontrol altına almak için bir handler eklememiz gerekiyor.

Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(DurumKontrol);

Yukarıdaki kod içerisinde sayfadaki ScriptManager yani PageRequestManager'a ait mevcut kopyayı (Instance) alıyoruz ve .add_initializeRequest metodu ile sayfada gerçekleşecek her bir AJAX talebinde çalıştırılmak üzere kendi hazırladığımız bir fonksiyonu atıyoruz. Fonksiyonumuzun adı DurumKontrol olacak ve aşağıdaki şekilde oluşturuyor olacağız.

        function DurumKontrol(sender, args)
        {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            if (args.get_postBackElement().id == 'Button2' & prm.get_isInAsyncPostBack())
                {
                    prm.abortPostBack();
                }
            else if (prm.get_isInAsyncPostBack() & args.get_postBackElement().id == 'Button1')
                {
                    args.set_cancel(true);
                    $get("Label1").innerHTML = "Yükleme devam ediyor...";
                }
            else if (!prm.get_isInAsyncPostBack() & args.get_postBackElement().id == 'Button1')
                {
                    $get("Label1").innerHTML = "Yükleniyor...";
                    $get("Button2").style.visibility = "visible";
                }
        }

Gelin şimdi bu fonksiyon içerisinde neler yaptığımıza tek tek bakalım. İlk olarak yine fonksiyon içerisinde kullanmak üzere prm adında bir değişken tanımlayarak sayfada kullanılan mevcut ScriptManager'a ait PageRequestManager objesinin bir kopyasını, vekilini alıyoruz.

            if (args.get_postBackElement().id == 'Button2' & prm.get_isInAsyncPostBack())
                {
                    prm.abortPostBack();
                }

Yukarıda inceleyebileceğimiz bir sonraki adımda kontrol ettiğimiz iki durum söz konusu. Bunlardan ilki; DurumKontrol fonksiyonumuzun çalışmasına neden olan kaynak AJAX talebinin sayfadaki hangi kontrolden geliyor olduğu. args.get_postBackElement().id komutu ile kaynak kontrolün ID bilgisini alabiliyoruz. Eğer kaynak element Button2 ise, yani İptal düğmesine basılmış ise ve hali hazırda süregelen bir AJAX asenkron veri aktarımı varsa hemen var olan aktarımı iptal etmemiz gerekiyor. prm.get_isInAsyncPostBack() komutu ile hali hazırda süregelen bir AJAX asenkron yüklemesi olup olmadığı öğrenebiliriz. Her iki durum da olumlu ise prm.abortPostBack(); komutu ile süregelen, yani aslında bir önceki yüklemeyi iptal ediyoruz.

            else if (prm.get_isInAsyncPostBack() & args.get_postBackElement().id == 'Button1')
                {
                    args.set_cancel(true);
                    $get("Label1").innerHTML = "Yükleme devam ediyor...";
                }

Bir sonraki adımda ek bir kontrol daha yapacağız. Eğer bir yükleme yapılıyorsa ve kullanıcı hala Yükle düğmesine tıklıyorsa, bu sefer de "Yükleme devam ediyor..." şeklinde bir uyarı göstererek yeni bir yükleme başlatmamamızda fayda var. Bu mekanizmayı kurmak için de ilk olarak süregelen bir yükleme var mı diye prm.get_isInAsyncPostBack() komutu ile kontrol ediyor ve eğer yeni elimize ulaşan yükleme talebini de Button1 oluşturmuş ise args.set_cancel(true) komutu ile yeni gelen talebi geçersiz kılıyor, geri çeviriyoruz. Son olarak sayfamızdaki Label1 içerisine uygun bir mesaj aktarıyoruz.

            else if (!prm.get_isInAsyncPostBack() & args.get_postBackElement().id == 'Button1')
                {
                    $get("Label1").innerHTML = "Yükleniyor...";
                    $get("Button2").style.visibility = "visible";
                }

Yapacağımız son kontrol aslında bir denetleme değil. Hatırlarsanız örneğimizin başında tasarımımızı yaparken İptal düğmesini sayfada görünmeyecek şekilde ayarlamıştık. Şimdi sıra geldi yeni bir yükleme başladığınıda hemen İptal düğmemizi görünür hale getirmeye. Eğer süregelen bir yükleme yoksa ve yeni bir yükleme işlemi Button1 aracılığı ile başlatılmış ise Label1 içerisine "Yükleniyor.." yazıyoruz ve Button2'nin visibility özelliğini visible olarak değiştiriyoruz.

Sayfamızın tam kodunu aşağıdaki inceleyebilirsiniz.

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <script type="text/javascript" language="javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(DurumKontrol);
       
        function DurumKontrol(sender, args)
        {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            if (args.get_postBackElement().id == 'Button2' & prm.get_isInAsyncPostBack())
                {
                    prm.abortPostBack();
                }
            else if (prm.get_isInAsyncPostBack() & args.get_postBackElement().id == 'Button1')
                {
                    args.set_cancel(true);
                    $get("Label1").innerHTML = "Yükleme devam ediyor...";
                }
            else if (!prm.get_isInAsyncPostBack() & args.get_postBackElement().id == 'Button1')
                {
                    $get("Label1").innerHTML = "Yükleniyor...";
                    $get("Button2").style.visibility = "visible";
                }
        }
        </script>
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server"></asp:Label><br />
                    <asp:Button ID="Button1" runat="server" Text ="Yükle" OnClick="button1_Click" />
                    <asp:Button ID="Button2" style="visibility:hidden;"
                            runat="server" Text="İptal" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

Sonuç olarak yukarıdaki teknikler ile sayfa içerisindeki tüm AJAX veri transferi işlemlerine çok daha hakim bir yaklaşım ile çok daha kullanıcı dostu bir web platformu oluşturarak web sitelerimizin ziyaretçilerini biraz daha rahatlatabiliriz.

Hepinize kolay gelsin.