Loading:


    Wczytywanie podstron do elementu DIV przy pomocy AJAX

     

    Skrypt składa się z 3 plików:

    index.htm
    ajax.js - plik z funkcjami AJAX
    dane.php - plik którego zawartość ma zostać wczytana do elementu DIV pliku index.html

     

    Wystarczy umieścić pliki w jednym karalogu i odpalić plik index.html. Po kliknięciu w łącze do elementu DIV zostanie załadowana treść pliku dane.php.



    Napisz Artyku³

    Listing

    Plik index.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
    <head lang="pl">
      <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
      <script type="text/javascript" src="ajax.js"></script>
    </head>
    <body>
            <ul id="trans-nav">
                    <li><a href="#" onClick="callAHAH('dane.php', 'zawartosc', 'Trwa ładowanie strony...')">STRONA GŁÓWNA</a></li>
            </ul>
            <div id="zawartosc">
                    <h2> Tutaj zostanie wczytana treść pliku dane.php</h2>
            </div>
    </body>
    </html>



    Plik ajax.js
    function getXMLHTTPRequest() {
    try {
            req=new XMLHttpRequest(); /* np. Firefox */
    }       catch(err1) {
            try     {
                    req=new ActiveXObject("Msxm12.XMLHTTP"); /* niektóre wersje IE */
            }       catch(err2) {
                    try {
                            req=new ActiveXObject("Microsoft.XMLHTTP"); /* niektóre wersje IE */
                    }       catch(err3) {
                            req=false;
                    }
            }
    }
    return req;
    }
    /* WCZYTYWANIE PODSTRON */
    var http=getXMLHTTPRequest();
    function callAHAH(url, pageElement, callMessage) {
            document.getElementById(pageElement).innerHTML = callMessage;
            myRand=parseInt(Math.random()*9999999999);
            var myurl=url + "?rand=" + myRand;  
            http.open("GET",myurl,true);
            http.onreadystatechange = function() {responseAHAH(pageElement);};
            http.send(null);
    }
    function responseAHAH(pageElement) {
            if(http.readyState == 4) {
                    if(http.status == 200) {
                            var output = http.responseText;
    document.getElementById(pageElement).innerHTML = output;
                    }
            }
    }

    Plih dane.php
    <?php
    header("Content-type: text/html; charset=iso-8859-2");
    ?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">      
    <head lang="pl">
      <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
    </head>
    <body>
       <h1> To są dane wczytana z pliku PHP </h1>
    </body>
    </html>
     




    Dodano przez: elektrycznydiabel Ranga: 0 Punktów: 0
    Komentarze użytkowników
      • Tre¶æ komentarza
        Kod do komentarza (opcjonalnie)
        PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
        Autor
        Token
        token

         

         








    funkcje.net
    Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2025 v.1.5 | design: diviXdesign & rainbowcolors