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-2024 v.1.5 | design: diviXdesign & rainbowcolors