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
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
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.
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.
AJAX Nasıl Çalışır?
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.
(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();
(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()
(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.
(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;
(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:
(5) onreadystatechange Event
XMLHttpRequest Örnek Kullanım
Ö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. https://algoritmaveprogramlama.wordpress.com/
Örnek1: MVC AJAX Uygulaması (devam )
Örnek1: MVC AJAX Uygulaması (devam ) Manuel Action Çağırma
Örnek1: MVC AJAX Uygulaması (devam ) AJAX Get ile Çağırma
Ö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);
Ö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); });
Örnek2: jquery AJAX Eklentisi (devam ) Deneme1: SamplePost Controller Kısmı [HttpPost] public JsonResult SamplePost() { return Json("İslem Tamam"); }
Ö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);
Ö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); }
Şö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
Yararlanılan Kaynaklar http://www.codeproject.com/articles/207797/learn-mvc- Model-View-Controller-step-by-step-in http://www.questpond.com Kitap: Programming ASP.NET MVC 5 A Problem Solution Approach, Nimit Joshi http://www.dotnet-tricks.com/tutorial/mvc/9khw190712- ViewData-vs-ViewBag-vs-TempData-vs-Session.html http://www.mvcsharp.com/makaledetay/viewdata- ViewBag-TempData-Nedir 24
İYİ ÇALIŞMALAR Yrd. Doç. Dr. Deniz KILINÇ drdenizkilinc@gmail.com deniz.kilinc@cbu.edu.tr 25