Microsoft Ajax Library ile istemci tarafında bir işlem yapıldığında, bu işlemle ilgili script dosyalarının istemciye yüklenmesini sağlayan Script Loader adını verdiğimiz bir yapımız var. Önceki yazılarımda da bahsettiğim gibi Microsoft Ajax Library içerisinde 200'e yakın script dosyası yer almakta. Bu dosyaların bazıları çekirdek(core) işlemleri içeren ve çoğu AJAX uygulamasında kullanılan dosyalar iken, bazıları ise sadece özel durumlarda, özel nesneler için kullanılan dosyalar. Dolayısıyla böyle geniş bir dosya arşivi üzerinde uygulama geliştirirken hangi dosyayı kullanmak zorunlu, şu durumda hangi dosyayı da eklemek gerekir gibi sorularla vakit kaybetmek, eksik dosyalar yüzünden script hataları alarak dakikalarca uğraşmak can sıkıcı olabiliyor.
Script Loader ise getirdiği kolaylık sayesinde bizi dosya bazında düşünmek yerine, yapılacak işlem bazında hareket etmemizi sağlıyor. Şöyle ki, siz Script Loader'a o sayfada yapacağınız işlemleri, kullanacağınız nesneleri belirtiyorsunuz, o arka planda gerekli olan bütün dosyaları yüklüyor. Yükleme işlemini yaparken bir dosyayı sadece ihtiyaç duyulduğunda indirdiği gibi(lazy loading), aynı dosyaya birden fazla talep atılmasını da engelliyor. Ajax kütüphanesi içerisinde Sys.require fonksiyonunu kullaranak Script Loader mekanizmasını harekete geçirebiliyoruz. Örneğin aşağıdaki kod parçasında sayfa üzerinde bir TextBox’a ColorPicker kontrolü bağlamak için gerekli olan kodlar bulunmakta.
<link href="Scripts/Extended/ColorPicker/ColorPicker.css" rel="stylesheet" type="text/css" />
<script src="Scripts/Start.js" type="text/javascript"></script>
<script src="Scripts/Extended/ExtendedControls.js" type="text/javascript"></script>
<script type="text/javascript">
Sys.require(Sys.components.colorPicker, function () {
Sys.create.colorPicker("#color1", null);
});
</script>
Kodlarda Sys.require fonksiyonu ile colorPicker bileşeni yüklenmiş ve yükleme işlemi esnasında da bir alt satırdaki ifade ile color1 adındaki text input kontrolü ColorPicker kontrolüne bağlanmış durumdadır. Belirtmek istediğim bir diğer nokta da her AJAX sayfasına eklenmesi zorunlu olan dosya/dosyalar bulunmaktadır. Kod parçasının 2. ve 3. satırına bakacak olursanız Start.js ve ExtendedControls.js adındaki dosyalarında eklendiğini göreceksiniz. Start.js her AJAX sayfasına eklenmesi gereken script dosyasıdır, sayfa içerisinde kullanacağınız temel JavaScript nesneleri ve fonksiyonları bu dosyada yer almaktadır. Ayrıca sayfada AJAX Control Toolkit’ten tanıdığımız kontrolleri(Calendar, ColorPicker, AutoComplete… gibi) kullanmak istiyorsanız bunun için de ExtendedControls.js dosyasını eklemeniz gerekmektedir. Bunların dışında kalan dosyalar ise Script Loader tarafından ihtiyaç duyulduğunda istemciye gönderilecektir.
Yukarıdaki kod parçasında Script Loader’a sadece colorPicker bileşenini yüklemesi gerektiğini söyledik. Birden fazla işlem için farklı Sys.require çağrımları yapabileceğiniz gibi, gerekli durumlarda bir çağrı üzerinden birden fazla bileşenin de yüklenmesini sağlayabilirsiniz. Örneğin aşağıdaki kod parçasında aynı çağırım içerisinde dataView bileşeni ve WebService scriptleri yüklenmekte. Görüleceği üzere köşeli parantez arasına yazılan birden fazla ifade ile bu tip çağrımlar yapılabiliyor.
Sys.require([Sys.components.dataView, Sys.scripts.WebServices], function () { ...