YZM 3215 İleri Web Programlama · PDF file1. BÖLÜM - 10 AJAX 2 Bu bölümde; ... Ayrıca ekrandaki güncellemedaha hızlıolduğu için ... •Kitap: Programming ASP.NET

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

2

Bu bölümde;

AJAX nedir?

AJAX nasıl çalışır?

MVC ve AJAX

jQuery AJAX Uygulaması

ile ilgili konular anlatılacaktır.

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

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…)




Manuel Action Çağırma



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…)


$("#btnTest").click(function () {var mesaj = {

Baslik: "Baslik",Aciklama: "Aciklma"

};

$.post("/Modern/SamplePost", mesaj, function (sonuc) {

alert(sonuc);});

});

<div><input type="button" value="AJAX Post" id="btnTest"/>

</div>

Deneme1: SamplePost – View Kısmı



Deneme1: SamplePost – Controller Kısmı

[HttpPost]public JsonResult SamplePost(){

return Json("İslem Tamam");}



Deneme2: RandomSayiDon – View Kısmı

<div id="rand">Sayı</div>

//3 saniyede bir Random bir sayı çekiliyorsetInterval(function () {

$.post("/Modern/RandomSayiDon", "", function (sonuc) {$("#rand").html(sonuc);});

}, 3000);



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

24

• 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


http://www.codeproject.com/Articles/207797/Learn-MVC-Model-View-Controller-step-by-step-in

http://www.questpond.com/

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

25

İYİ ÇALIŞMALAR…

Yrd. Doç. Dr. Deniz KILINÇ

[email protected]

[email protected]


mailto:[email protected]

mailto:[email protected]

Documents

YZM 3215 İleri Web Programlama · PDF file1. BÖLÜM - 10 AJAX 2 Bu bölümde; ... Ayrıca ekrandaki güncellemedaha hızlıolduğu için ... •Kitap: Programming ASP.NET