- engindeniz.net - http://www.engindeniz.net/v3.0 -

Javascript ile dosya okumak

Merhaba,

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 [1]

birkaç AJAX ile ilgili site
w3schools anlatımı oldukça net [2]
wikipedia [3]
Türkçe başka bir AJAX kaynağı [4]

umarım işinize yarar

Be Sociable, Share!
  • [5]
  • [6]
  • [7]
  • [8]