YZM 3215 İleri Web Programlama

Transkript

1 YZM 3215 İleri Web Programlama Yrd. Doç. Dr. Deniz KILINÇ Celal Bayar Üniversitesi Hasan Ferdi Turgutlu Teknoloji Fakültesi Yazılım Mühendisliği 1

2 BÖLÜM - 10 AJAX Bu bölümde; AJAX nedir? AJAX nasıl çalışır? MVC ve AJAX jquery AJAX Uygulaması ile ilgili konular anlatılacaktır. 2

3 AJAX Nedir? AJAX (Asynchronous JavaScript ve XML), web sayfalarında JavaScript ve XMLHttpRequest ortak kullanımı ile etkileşimli web uygulamaları yaratmaya yarayan web programlama tekniğine verilen addır. Dilimizde AJAX ya da AYAKS şeklinde farklı söylemlere rağmen İngilizce' de 'ey-ceks' olarak okunur.

4 AJAX Nedir? (devam ) Hızlı ve dinamik web sayfası yapmayı sağlar. AJAX, ilk olarak 2005 yılında Google firmasının sunduğu Google Suggest ile birlikte popüler olmuştur. Aramak için harfleri girdikçe her harf girişi sunucuya gönderilir. Sunucu harfleri değerlendirir ve geriye cevap olarak olası önerileri döner.

5 AJAX Nasıl Çalışır?

6 AJAX Avantajları Güncellemelerde sayfanın tamamının değil istenilen kısımların sunucuya gidip gelmesidir. Örnek: Mesela seçilen şehre göre ilçelerin getirilmesi gerektiğini varsayalım. AJAX kullanılmazsa, sayfadaki tüm işlemlerle birlikte şehre bağlı ilçe isteği de sunucuya gider, cevap alınıp sayfanın tamamı tekrar güncellenir. AJAX kullanılırsa, sunucuya sadece şehre bağlı ilçelerin isteği gidip cevap döner ve ekranda gösterilir. Böylece hem zaman kazanmış hem de ağ trafiğini hafifletmiş oluruz. Ayrıca ekrandaki güncelleme daha hızlı olduğu için kullanıcıların beklemesine gerek kalmaz.

7 (1)XMLHttpRequest Nesnesi AJAX ın kilometre taşıdır. Arka planda istemci ile sunucu arasındaki veri iletişiminde kullanılır. Bu sayede bir web sayfasının sadece belirli bir bölümünün update edilmesine imkan sağlanır. Tüm modern tarayıcılar tarafından desteklenmektedir. Nesne yaratılış biçimi aşağıdaki gibidir: variable = new XMLHttpRequest();

8 (2)Sunucuya İstek Gönderme Sunucuya istek (request) göndermek için XMLHttpRequest nesnesinin aşağıdaki metotları kullanılır. open() send() Kullanım şekli aşağıdaki gibidir xhttp = new XMLHttpRequest() xhttp.open("get", "localhost/main/index/",true) xhttp.send()

9 (3)GET mi POST mu? GET daha basit ve daha hızlıdır ve çoğu durumda kullanılabilir. Ancak GET in URL cacheleme problemi vardır. POST kullanımında böyle bir problem yoktur. Ayrıca GET ile sunucuya gönderilebilecek verinin boyutu sınırlıdır, POST ta veri boyutunda sınır yoktur.

10 (4)Sunucu Cevabı (Response) Gönderilen istek için sunucudan gelen cevabı okumak için XMLHttpRequest nesnesinin aşağıdaki özellikleri kullanılır. responsetext responsexml Kullanımı aşağıdaki gibidir: document.getelementbyid("demo").innerhtml = xhttp.responsetext;

11 (5) onreadystatechange Event Gönderilen istek sonucunda sunucudan gelen durumlara göre aksiyon almak için XMLHttpRequest nesnesine ait kullanılan eventtir. Event XMLHttpRequest nesnesinin durumu (status) olan readstate her değiştiğinde tetiklenir. Kullanım şekli aşağıdaki gibidir:

12 (5) onreadystatechange Event

13 XMLHttpRequest Örnek Kullanım

14 Örnek1: MVC AJAX Uygulaması Yeni bir ASP.NET MVC projesi oluşturalım. İçerisindeki tüm Controller ı View ları silelim. AJAXController isimli yeni bir controller yaratalım. Index isimli bir tane Action ı olsun. AJAXTest.html dosyasını indirelim ve projemizde AjaxTest isimli bir klasör açıp, dosyayı ekleyelim.

15 Örnek1: MVC AJAX Uygulaması (devam )

16 Örnek1: MVC AJAX Uygulaması (devam ) Manuel Action Çağırma

17 Örnek1: MVC AJAX Uygulaması (devam ) AJAX Get ile Çağırma

18 Örnek2: jquery AJAX Eklentisi Aynı ASP.NET MVC projesine: ModernController isimli yeni bir controller yaratalım. Şimdilik Index isimli bir tane Action ı olsun. Index View içerisinde 2 tane AJAX Post denemesi yapacağız. Deneme1: SamplePost Deneme2: RandomSayiDon $.get(url,callback); $.post(url,data,callback);

19 Örnek2: jquery AJAX Eklentisi (devam ) Deneme1: SamplePost View Kısmı <div> </div> <input type="button" value="ajax Post" id="btntest"/> $("#btntest").click(function () { var mesaj = { Baslik: "Baslik", Aciklama: "Aciklma" }; }); $.post("/modern/samplepost", mesaj, function (sonuc) { alert(sonuc); });

20 Örnek2: jquery AJAX Eklentisi (devam ) Deneme1: SamplePost Controller Kısmı [HttpPost] public JsonResult SamplePost() { return Json("İslem Tamam"); }

21 Örnek2: jquery AJAX Eklentisi (devam ) Deneme2: RandomSayiDon View Kısmı <div id="rand">sayı</div> //3 saniyede bir Random bir sayı çekiliyor setinterval(function () { $.post("/modern/randomsayidon", "", function (sonuc) { $("#rand").html(sonuc); }); }, 3000);

22 Örnek2: jquery AJAX Eklentisi (devam ) Deneme2: RandomSayiDon Controller Kısmı [HttpPost] public JsonResult RandomSayiDon() { Random r = new Random(); int sayi = r.next(1, 10000); return Json(sayi); }

23 Şöyle bir soru gelse Senaryo Bilgi Herhangi bir ORM çatısı kullanmadan, sizin tasarlayacağınız sınıf ve listeyi içeren Broadcast mesaj yayını ekleyen ve bu mesajları listeleyen (Mesaj () + Mesaj Listesi) bir MVC uygulaması yapınız. Neler Olacak? Model içerisinde VeriKatmani.cs (Mesaj+MesajListesi) MesajController (MesajEkleme,MesajListeleme) MesajView (MesajGonderme, MesajListeleme setinterval kullanarak) Bootstrap json AJAX

24 Yararlanılan Kaynaklar Model-View-Controller-step-by-step-in Kitap: Programming ASP.NET MVC 5 A Problem Solution Approach, Nimit Joshi ViewData-vs-ViewBag-vs-TempData-vs-Session.html ViewBag-TempData-Nedir 24

25 İYİ ÇALIŞMALAR Yrd. Doç. Dr. Deniz KILINÇ 25