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 - 6 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ı Uygulama 1: Normal Çalıştırma Uygulama 2: ViewBag ve QueryString Kullanımı

16 jquery AJAX Uygulama ve Örnek $.get(url,callback); $.post(url,data,callback);

17 jquery AJAX Uygulaması ÖRNEK UYGULAMA

18 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 18

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