İstemci Taraflı AJAX Yüklemelerini JavaScript ile İptal Etmek

0 dakikada yazıldı

8318 defa okundu

Düzenle

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.