Bir PHP uygulamasına gelen GET, POST gibi talepler eğer Javascript üzerinden geliyorsa bunu anlamak bazı durumlarda işimizi kolaylaştırmaktadır. GET taleplerini karşılamakta bir sorun yaşamayız fakat POST taleplerinde Javscript ile giden Header bilgisinde $_POST[‘name’] şeklinde query string değerini alamayabiliyoruz.
O halde duruma göre işlem yapabilmek için önce talebin Javascript yani XMLHttpRequest olup olmadığını anlamalıyız. Bunun için örnek bir sınıf yazarak durumu anlamaya çalışalım. Örnek bir app.php dosyasının içeriğini aşağıdaki şekilde belirleyelim.
class Request{
public static function IsAjaxRequest(){
return isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
$_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest' ;
}
}
if(Request::IsAjaxRequest())
echo("Ajax");
else
echo("Not");
Bu PHP uygulamasını internet tarayıcımızdan direkt olarak çağırdığımızda ekrana “Not” şeklinde çıktı verecektir. Eğer bir Javascript uygulamasından talep gönderecek olursak “Ajax” şeklinde sonuç alırız.
DİKKAT: Eğer IIS üzerinden PHP uygulaması çalıştırıyorsanız bu yöntem çalışmayacaktır. Windows ortamında IIS üzerinden PHP 5.3 ile yaptığım denemede bunu fark ettim. Bunun sebebi $_SERVER içindeki değişkenlerin PHP tarafından değil HTTP sunucusu tarafından oluşturulmasıdır. IIS HTTP sunucusu HTTP_X_REQUESTED_WITH başlığını oluşturmadığından IIS üzerinde çalışmaz. Apache HTTP sunucusu HTTP_X_REQUESTED_WITH değerini oluşturmaktadır.
Javascript dili son yıllarda yaygın bir ön yüz(front end) geliştirme aracı haline gelmiştir. Farklı problemlere çözüm üreten kütüphanelerin sayısı gün geçtikçe artmakta ve “front end” geliştiricilerin işi de epeyce kolaylaşmaktadır. Bazı durumlarda hazır kütüphanelerin dışına çıkıp kontrolü elimize almak istediğimizde Javascript kodları ile birebir haşır neşir olmak durumunda kalırız.
Javascript ile ağırlıklı olarak DOM (Document Object Model) işlemeleri yapılmaktadır. DOM Türkçe olarak “Belge Nesnesi Modeli” şeklinde çevirilebilir. Sunucu tarafından oluşturulup(render) bize gönderilen internet sayfasını bir belge olarak düşünebiliriz. Bu internet sayfasında gördüğümüz yazı, resim, video, form gibi elemanları birer nesne olarak düşünebiliriz. Javascript dili ile bu nesneler üzerinde işlemler yapabilmekteyiz. Bunun yanı sıra Javascript dili bize sunucu ile iletişim kurmamızı da sağlamaktadır. Sunucudaki bir URL üzerinden veri istemek veya sunucuya veri göndermek mümkündür.
Javascript bize, sunucuya düz metin (plain text) verisi göndermenin yanı sıra bir de dosya gönderme imkanı sunmaktadır. Bu yazının konusu da dosyaların sunucuya gönderimi sırasında işlemleri takip etmektir.
Javascript ile arka plandan sunucu ile bilgi alışverişi yapmak istediğimizde XMLHttpRequest nesnesini kullanırız. XMLHttpRequest nesnesi ile;
Sayfa yenilemeden bilgi alışverişi yapmak mümkündür.
Veri alışverişi arka planda gerçekleşir.
Veri alışverişi asenkron veya senkron olarak belirlenebilir.
Sunucuya bir istek göndermek için XMLHttpRequest nesnesinin Open() ve Send() metodları kullanılır.
open() Metodu: Gönderilen isteğin(request) türünü(GET, POST), URL adresini ve isteğin asenkron olup olmadığını belirler.
send() Metodu: İsteği sunucuya gönderir.
XMLHttpRequest nesnesinin çalışma prensibini incelemek için bir kaç örnek vermeden geçmek olmaz.
Örnek: Senkron çalışan yöntem
Senkron Yöntem
Senkron yöntemlerde open() metodunun son parametresi false olarak belirlenir ve send() metodu ile istek sunucuya gönderilir. İşlem asenkron olmadığından istek gönderildikten sonra cevap gelene kadar beklenir. Yani send() metodundan sonra gelen kodlar çalışmaz.
Örnek: Asenkron çalışan yöntem
Asenkron Yöntem
Asnekron isteklerde open() medodunun son parametresi true olarak belirlenir ve request nesnesinin readystatechange olayına(event) bir metod bağlanır. Sunucudan cevap geldiğinde bu metod tetiklenir. İsteği göndermek için send() metodu çalıştırılır. İşlem asenkron olduğundan send() metodu çalıştırıldıktan sonra başka kod satırları varsa onlar da çalıştırılır.
Bu örneklerde sunucudan GET metodu ile düz metin sonucu almak için uygulamalar yaptık.
Asıl konumuz, bir dosyanın bir isteğe(request) eklenerek sunucuya gönderilmesi işlemidir. Dosyalar büyük veriler olabildiği için, uzak sunucuya gönderilmeleri sırasında takip grektiren bir durum durum ortaya çıkmaktadır. İsteğin sunucuya ulaşıp ulaşmadığı, dosyanın bir T anında yüzde kaçının yüklendiği ve işlemin tamamlanıp tamamlanmadığı gibi durumların kullanıcıya bildirilerek belirsizliğin ortadan kaldırılması gerekmektedir.
Dosya gönderim işlemleri sırasında XMLHttpRequest nesnesinin upload özelliğinden faydalanırız. upload özelliği üzerindeki olaylar(events) sayesinde yükleme işlemlerini takip edebiliriz.
Upload Javascript Kodu
upload özelliğinin;
loadstart olayı: yükleme işlemi başladığında tetiklenir.
progress olayı: yükleme işlemi sırasında her giden byte grubu sunucuya aktarıldığında tetiklenir.
load olayı: yükleme işlemi başarıyla tamamlandığında tetiklenir.
request.open() metodu çalıştırıldıktan sonra setRequestHeader metodu ile gönderilecek olan isteğe(request) dosya bilgileri eklenir. Dosya bilgileri, file tipindeki input elementinden alınır. send() metodu ile istek POST tipinde sunucuya gönderilir. Burada send netodunun parametre alan çeşidi kullanılmış ve parametre olarak POST edilecek bilgi send metoduna eklenmiştir.
Dosya Upload İşlemi
Dosya yükleme sırasında işlem takibini konsola yazarak gerçekleştirdim. Siz isterseniz HTML elementlerine yazarak gerçekleştirebilirsiniz. Hatta daha önceki yazılarımdan birinde css aracılığı ile durum çubuğu yapmayı işlemiştim. Dosya upload işlemini bu yöntemle bir durum çubuğuna bağlamak mümkündür.
Bir önceki yazımızda XMLHttpRequest nedir, nasıl kullanılır ve kullanılırken ne gibi sorunlar ile karşılaşılır şeklinde bir incelemede bulunmuştuk.
Bu yazıda ise ASP.NET MVC tabanlı bir uygulamada javascript ile XMLHttpRequest göndermeyi ve karşılaşılan sorunları inceleyeceğiz.
Bir önceki yazımızda, bir XMLHttpRequest gönderme işleminin uygulama sunucusuna yapılması durumunda bir sorunla karşılaşmayacağımızdan ancak dışarıdaki bir sunucuya istek gönderirken bir yetki sorunuyla karşılaşacağımızdan bahsetmiştik.
Şimdi ASP.NET MVC uygulamasında bulunan bir controller sınıfındaki JsonResult döndüren bir action metoduna XMLHttpRequest göndermeye çalışalım.
public class HomeController : Controller
{
public JsonResult Application()
{
var jsonResult = new {
Name = "XMLHttpRequest Applcaition",
Date = DateTime.Now.AddDays(-5).ToShortDateString()
};
return Json(jsonResult, JsonRequestBehavior.AllowGet);
}
}
Basit bir JSON nesnesi döndüren bir metod olşuturduk. Şimdi View tarafından bu metoda bir XMLHttpRequest gönderelim. Yani kendi uygulamamızı sunan sunucuya bir XMLHttpRequest gönderelim ve internet tarayıcımızın tavrına bakalım.
Uygulama Sunucusuna Gönderilen XMLHttpRequest
İnternet tarayıcımız hiç itiraz etmeden sorguyu Javascript aracılığı ile başarılı bir şekilde almıştır.
Şimdi de uygulama sunucumuzun dışındaki bir sunucuya istek(request) göndermeye çalışalım ve sonucu görelim.
Farklı Sunucuya XMLHttpRequest gönderilmesi
Tarayıcımız kodu derlerken bize bir itirazda bulundu. Hata “Erişim Engellendi” şeklinde. İnternet tarayıcımız bize uygulama sunucumuz dışına çapraz(cross) sorgu gönderme izni vermiyor ve ağ iletişimini kapatıyor.
Bu sorunu aşmak için uygulama sunucumuza bir istek gönderip, uygulama sunucumuz üzerinden ilgili sorgunun sonucunu almaya çalışacağız. Yani arka kapıdan dolaşmak zorunda kaldık.
Şimdi projemize bir Proxy uygulaması oluşturup bu uygulama üzerinde işlemi deneyelim. Projemize Proxy adında bir dizin açıp içerisine Proxy.ashx adında bir Generic Handler ekleyelim.
public class proxy : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
WebRequest request = WebRequest.Create("http://www.google.com");
WebResponse webResponse = request.GetResponse();
Stream responseStream = webResponse.GetResponseStream();
if (responseStream != null)
{
StreamReader reader = new StreamReader(responseStream);
context.Response.Write(reader.ReadToEnd());
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
Javascript üzerinden bu proxy’ye XMLHttpRequest göndereceğiz ve proxy’nin elde ettiği sonucu kullanacağız.
Proxy ile XMLHttpRequest
Olay bu kadar basit aslında. Bu şekilde istediğimiz sosyal paylaşım sitelerine, değişik hizmetler sunan web servislerine Javascript üzerinden erişebiliriz.
Bu yöntem, CBS tarzı harita uygulamalarında farklı yerlerde barınan sunuculara Javascript API’ler üzerinden sorgu gönderirken çok işe yarıyor. Örneğin Map servislerini bir sunucudan, Harita resimlerini başka bir sunucudan, kişi bilgilerini ayrı bir servis üzerinden çekip tek bir sunum ortamında faydalanmak mümkün hale gelebiliyor. Farklı çözümlerde bu yöntemi kullanmak size kalmış.
Günümüzde değişik web hizmetlerini(service) kullanıcılara açan internet uygulamaları arttıkça, haliyle bu sunulan hizmetleri alabilmek adına değişik yöntemler kullanılır. Örneğin sosyal ağların sunduğu servisler, hava durumu, haber veya blog servisleri tarafından sunulan bilgileri biz de alıp uygulamalarımızda kullanmak isteriz.
AJAX(Asynchronous Javascript and XML) tabanlı web uygulamaları yaygınlaştıkça, web sunucularına istek gönderip, sunucu tarafında yeniden oluşturulan HTML çıktılarını almak yerine var olan sayfaları hiç yenilemeden(refresh) sorgu gönderip cevabı mevcut sayfa üzerine dökme yoluna gidiliyor. İnternet tarayıcıları (web browser) üzerinden Javascript kodu ile sunuculara istek gönderip cevap almak mümkündür. Bu gibi istekleri(request) karşılamak üzere tarayıcılar tarafında bulunan XMLHttpRequest nesnesi devreye girmektedir.
XMLHttpRequest nesnesi ile uygulamamızın bulunduğu sunucu dışında bir sunucuya istek göndermek güvenlik açısından bazı kısıtlamalara takılmaktadır. Bu gibi sorunları aşmak için direk başka sunucuya (örneğin Yahoo servisine)istek göndermek yerine kendi sunucumuza bir proxy uygulaması oluşturup bu proxy üzerinden istekleri göndermek uygun olacaktır.
Neden Proxy Kullanılır?
Modern Web tarayıcıları, sunduğu geliştirici ve kullanıcı dostu eklentilerin yanı sıra güvenliği sağlamak açısından başarılıdırlar. XMLHttpRequest çağrıları içeren bağlantılarda web tarayıcılar bir güvenlik sınırlaması getirirler. Bu sınırlama ile bir script veya uygulamanın kendi geldiği sunucu haricinde bir sunucuya istek göndermesi engellenir. Aşağıdaki resimde web tarayıcı üzerinden, uygulamanın kendi web sunucusuna HTTP metodlarıyla(GET, POST, v.s) veya XMLHttpRequest ile istek göndermesinin mümkün olduğu gösterilmiştir.
XMLHttpRequest isteği
Ancak yazdığınız bir script ile web tarayıcısı üzerinden başka bir sunucuya istek gönderecek olursanız (örneğin Yahoo web servislerine), tarayıcı aradaki bağlantıyı engeller. Aşağıdaki resimde bu durum gösterilmiştir.
XMLHttpRequest dış sunucu isteği
Bu gibi durumlarda genellikle kullanılan çözüm, proxy kullanılmasıdır. Bir web servisine internet tarayıcısı üzerinden direk istek göndermek yerinde, kendi sunucunuzda bulunan bir proxy’ye isteği gönderirsiniz. Proxy, aldığı isteği ilgili web servisine göndererek aldığı cevabı internet tarayıcınızdaki client tabanlı uygulamanıza gönderir. Servis ile bağlantıyı kuran web sunucusu olduğundan internet tarayıcısı açısından artık bir sorun kalmamıştır.
XMLHttpRequest Proxy Kullanımı
Client tabanlı web uygulamaları olarak Javascript, Java Flex, Silverlight gibi uygulamaları düşünebilirsiniz. Bu tarz uygulamalar web tarayıcıları üzerinden çalışırlar. Web tarayıcılar üzerinden çalışan uygulamalardan Yahoo, Twitter gibi sitelere ait servislere ulaşmak için proxy kullanabilirsiniz.
