Loading:

Światowy dzień książki... IT! [Książki drukowane -40%| Ebooki -50%]

Ostatnio dodane

php Upload dodaw PHP Tworzenia mi Logowanie obiekt Prosty system sz Lista plików z Jak zbudować pr Jak zamienić w IP uzytkownika Obiekt Timer [AS Proste skrypty w

Top 10

1.urlencode 2.reset() 3.array each 4.ksort() 5.hash_final 6.strtr() 7.assert() 8.ftp_rmdir 9.session_id 10.imagefill

56853.05

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.

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>