Şahin'in Deneyimleri

En aşağıda gördüğümüz a href linkleri ile java fonksiyonuna parametre gönderiyoruz. Gönderdiğimiz parametre sonucu ilgili html sayfasını,

document.getElementById("ortaForm").innerHTML = xmlhttp.responseText;

komut satırında ortaForm id' sine sahip etiketin içersine gönderiyoruz.
fonksiyon içerisindeki yapı sayesinde çağırdığımız html sayfasını ana sayfa yenilenmeden yapıyoruz. Böylece oluşturulmuş projedeki sitenin performansının daha iyi olmasını sağlar. AJAX ile daha kullanışlı sayfalar oluşturabiliriz. Gerekli araçları kullanarak bir sayfada birden fazla işlem yaptırabiliriz.

Bu yapı sadece html çağırımı ile sınırlı değildir. Php, .txt, .xml, .json vb. birçok değişik dosyayı asenkron biçimde çağırmaktadır.

<html>
<head>
    <script>
        function listele(file)
        {
            if (window.XMLHttpRequest)
            {
                xmlhttp = new XMLHttpRequest();
            }
            else
            {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function()
            {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                {
                    document.getElementById("ortaForm").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET", file, true);
            xmlhttp.send();
        }
    </script>

</head>
<body>

    <a href="#" onclick = "listele('ders.html')"> 1. Yarıyıl derslerini listele </a></br>
    <a href="#" onclick = "listele('ders2.html')"> 2. Yarıyıl derslerini listele </a>

    <div style="border:1px solid red; width:500px; height:250px;">

        <div id="ortaForm">
        </div>

    </div>
</body>
</html>

Herhangi bir hata almanız durumunda, projenizdeki <script> tagları bu yapının kullanımını engelleyebilir. diğer script taglarını silip bu yapıyı birde öyle deneyin ve çalıştığını göreceksiniz.

Şahin'in Deneyimleri

2 Nisan 2016 Cumartesi

html ile asenkron yapı kullanımı | use asenkron communication with html