Bir web projesinde harici dosyayı açıp içeriğini gösterebilmek için JQuery kütüphanesinden “load” fonksiyonunu kullanabiliriz.İçeriği gösterilen dosya fiziksel olarak server tarafında bulunması gerekiyor ya da fiziksel dosya yolunu tam olarak belirtebildiğiniz dosyalarda hiç bir problem yaşanmadan dosya yüklenip içeriği açılabiliyor.Şimdi gelin JQuery – load fonksiyonunu beraber inceleyelim.
Öncelikle load fonksiyonunun özelliklerini görelim.
- load fonksiyonu ile “html”, “js”, “txt”, “css” vs.. gibi uzantılı dosyaların içeriklerine erişilebilmektedir.
- load fonksiyonu seçilen dosyayı mantıksal olarak yükler, içeriğini açabiliyorsa gerekli belirtilen alanda gösterir.Fiziksel hiç bir işlem gerçekleştirmez.
- load fonksiyonu seçilen dosyanın içeriği uygunsa eğer “html”, “css” ve “js” komutlarını çalıştırır.(Komutlar doğru prosedürlere sahiplerse eğer tarayıcı tarafından derlenmekte ve çalıştırılmaktadır.)
Şimdi bir örneklendirme yapalım.
Aşağıdaki kod bloğunu inceleyeniz.
<html>
<head>
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/javascript">
function DosyaGoruntule()
{
$("#Goruntuleyici").load("harici.html");
}
</script>
<style>
.GoruntuleyiciClass{
width: 200px;
height: 200px;
border: 2px ridge #999;
}
</style>
</head>
<body>
<div name="Goruntuleyici" id="Goruntuleyici" class="GoruntuleyiciClass"></div>
<input type="submit" id="tikla" name="tikla" value="Dosya İçeriği Görüntüle" onClick="DosyaGoruntule();" />
</body>
</html>
Yukarıdaki kod bloğunu incelerseniz eğer “Goruntuleyici” isimli div nesnesinde harici dosyamızın içeriğini görüntülüyoruz.Dikkat ederseniz “harici.html” isimli bir dosyayı html dosyasının içeriğini göstertiyoruz.
Yukarıdaki örnek kodun ekran görüntüsü aşağıdaki gibidir.
