Javascript ile dosya okumak
Programlama Mart 8th. 2009, 8:52pmMerhaba,
iki gun once Javascript ile ekrana rastgele sozler getiren aşağıdaki script’i kodladim,
<html>
<head>
<title>rastgele soz</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Engin Deniz">
<meta name="copyright" content="© 2009 Engin Deniz">
<script type="text/javascript">
var kontrol=0;
var veri;
var kelimeler;
function dosyayial(pURL) {
if (window.XMLHttpRequest) { // Mozilla, Safari
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=hazirla;
xmlhttp.open("GET", pURL, true);
xmlhttp.send(null);
} else if (window.ActiveXObject) { //IE
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
if (xmlhttp) {
xmlhttp.onreadystatechange=hazirla;
xmlhttp.open('GET', pURL, true);
xmlhttp.send();
}
}
}
function hazirla() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
veri=xmlhttp.responseText;
kelimeler=veri.split("*");
cevir();
}
}
function cevir(degisken){
var randy = Math.round(Math.random()*(kelimeler.length-1));
document.getElementById('soz_kesesi').innerHTML=kelimeler[randy];
kontrol=1;
}
function calistir(){
if(kontrol==1){
//alert("onceden yuklendi");
cevir();
} else { //alert("ilk defa yuklendi");
dosyayial('http://www.engindeniz.net/v3.0/engin/sozler.txt');
}
}
</script>
</head>
<body>
<p>[<a href="javascript:void(0);" onclick="calistir();">Sözü Değiştir</a>]</p>
<div id="soz_kesesi">.</div>
</body>
</html>
aslinda bu tarz script calışmaları PHP ve diğer web tabanlı programlarda örnekleri bolca var ve yapması daha basit.
ancak bunu yapmamdaki neden kullanacağım yerde PHP desteği olmamasıydı.
dosyayı okumak için XMLHttpRequest kullandım
eğer elimde 20-30 adet söz olsaydı, o zaman dosyaya ihtiyacım olmaz. javascript kodları içine şöyle bir dizi ekler, rastgele bir sayi üretip, ilgili array’i ekrana basardim
soz[1] = “Eğer elinizde bir çekiç varsa her şey gözünüze bir çivi gibi görünmeye başlar. (ABRAHAM MUSLOW)”
soz[2] = “Herkesin sizi sevmesini istiyorsanız, gülümseyiniz. (Dale Carnegie)”
soz[3] = “Silgi kullanmadan resim çizme sanatina hayat denilmektedir.(John Christian)”
…
..
ancak benim elimde sozlerin oldugu bir dosya var ve icinde 145 adet soz var
bu nedenle, javascript ile dosyayı çağırmam gerekiyordu, önce aklıma iframe kullanıp içine ilgili dosyayı çağırmak geldi ama bazı browserlarda iframe içeriğini değişkene atayamıyoruz (güvenlik nedeniyle) son çözüm olarak XMLHttpRequest nesnesini kullandım. bu şekilde dosyayı değiskene aldım, sonra bölüp ekrana yazdırdım
(bolme isleminde kolaylik olmasi icin word programini kullanarak ” isareti sonrasina “*” isareti koydum bu sayede soz obeklerini tam olarak teker teker dosyadan ayirabildim)
XMLHttpRequest nesnesi ile yaptigim is aslinda AJAX adı verilen javascript betiğinin ta kendisidir.
eger AJAX’i yeni duyuyorsaniz bu yöntem ile bu örnek dışında birçok şey yapabilirsiniz
AJAX’ın ne işe yaradığını basit olarak tanımlamak gerekirse
herhangi bir sayfanın ekrana getirdiği verileri
bulunduğunuz sayfa yenilenmeden kendi içinde yorumlayıp bir değişkene atayarak geri döndüren javascript uygulaması diyebilirim sanırım
çok basit bir anlatım oldumu emin değilim:)
biraz daha basitleştirmeye çalışayım
bir sayfa çağırdınızda bulunduğunuz sayfa gider ve istediğiniz sayfa yerine gelir. bu doğal bir harekettir.
ancak XMLHttpRequest ile çağırdığınızda bulunduğunuz sayfa sabit kalır,o arkada çalışırarak istediğiniz sayfaya talepte bulunur ve sayfa yuklenince normalde ekrana çıkması gerekenler (yazilar yada vb…) bir değişkene atanır. sonucunda da o veriler yumağını ister ekrana basarsınız isterseniz bölüp bölüp kullanırsınız:) bundan sonrası hayal gücünüze kalmış
sudoku ve sözlük uygulamalarımı bu yöntemi kullanarak yapmıştım
sudoku’da göreceğiniz gibi ekran yenilenmeden cevaplar kontrol edilebiliyor.
sözlük uygulamasında ise ekran yenilenmeden yazdığınız sorguların sonuçları hemen ekranda beliriyor.
yukarıdaki kodun çalışır halini buradan görebilirsiniz
Örnek
birkaç AJAX ile ilgili site
w3schools anlatımı oldukça net
wikipedia
Türkçe başka bir AJAX kaynağı
umarım işinize yarar
Bu Yazıyı Bastır