Po pierwsze, usunąłem niepotrzebne puste linie:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>Ajax. Kurs od podstaw. Część pierwsza: Wprowadzenie. Przykład #4.3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
font-family: Verdana, sans-serif;
font-size: small;
}
h3 {
font-size: 90%;
margin: 0;
padding: 0;
}
.tresc {
width: 300px;
border: 1px solid black;
padding: 10px;
background: #e8fff1;
margin: 10px;
}
.tresc div {
display: none;
padding: 5px;
margin-left: 40px;
font-size: 80%;
}
.tresc a {
width: 20px;
font-family: "Courier New", monospace;
text-decoration: none;
}
</style>
<script type="text/javascript">
function getXMLHttpRequest()
{
var request = false;
try
{
/*
* Przeglądarki: Firefox 2, Opera 9, IE 7
*/
request = new XMLHttpRequest();
} catch(err1) {
try {
/*
* Przeglądarka: IE 6
*/
request = new ActiveXObject('Msxml2.XMLHTTP');
} catch(err2) {
try {
/*
* Przeglądarka: IE 5
*/
request = new ActiveXObject('Microsoft.XMLHTTP');
} catch(err3) {
request = false;
}
}
}
return request;
}
var r;
r = getXMLHttpRequest();
var opis= new Array(20);
opis[0] = 'Producent';
opis[1] = 'Model';
opis[2] = 'Typ';
opis[3] = 'MPx';
opis[4] = 'LCD';
opis[5] = 'Typ matrycy';
opis[6] = 'Wymiary matrycy';
opis[7] = 'Pamięć';
opis[8] = 'Mocowanie obiektywu';
opis[9] = 'Mnożnik ogniskowej';
opis[10] = 'Stabilizacja obrazu';
opis[11] = 'Migawka';
opis[12] = 'Czułość';
opis[13] = 'Autobracketing';
opis[14] = 'Podgląd głębi ostrości';
opis[15] = 'Balans bieli';
opis[16] = 'Zdjęcia seryjne';
opis[17] = 'Pole widzenia';
opis[18] = 'Korpus';
opis[19] = 'Baterie';
opis[20] = 'Cena';
var element;
function processResponse()
{
if (r.readyState == 4) {
if (r.status == 200) {
var x = r.responseXML.getElementsByTagName('aparat')[0].childNodes;
var tmp = '';
for (i = 2; i < x.length; i++) {
tmp = tmp
+ '<strong>' + opis[i] + ':</strong> '
+ x[i].childNodes[0].nodeValue
+ '<br />';
}
element.innerHTML = tmp;
};
}
}
function expandCollapse(Id, Numer)
{
element = Id.parentNode.parentNode.childNodes[1];
if (element.style.display == 'block') {
element.style.display = 'none';
Id.innerHTML = '+';
} else {
element.style.display = 'block';
Id.innerHTML = '-';
r.open('GET', 'dane-xml/' + Numer + '.xml', true);
r.onreadystatechange = processResponse;
r.send(null);
}
}
</script>
</head>
<body>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 1);">+</a> Canon EOS 20D</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 2);">+</a> Canon EOS 30D</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 3);">+</a> Canon EOS 350D</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 4);">+</a> Canon EOS-400</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 5);">+</a> Fujsum Finepix S3 Pro</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 6);">+</a> Nikon D200</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 7);">+</a> Nikon D 40x</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 8);">+</a> Nikon D80</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 9);">+</a> Nikon D40</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 10);">+</a> Olympus E-1</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 11);">+</a> Olympus E-330</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 12);">+</a> Olympus E-400</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 13);">+</a> Olympus EOS 350D</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 14);">+</a> Olympus E-510</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 15);">+</a> Olympus E-300</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 16);">+</a> Olympus E-410</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 17);">+</a> Pentax K10D</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 18);">+</a> PENTAX K100D/K11OD</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 19);">+</a> Pentax K100D</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 20);">+</a> Samsung GX-10</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 21);">+</a> Sigma SD14</h3><div></div></div>
<div class="tresc"><h3><a href="#" onclick="expandCollapse(this, 22);">+</a> SONY A100</h3><div></div></div>
</body>
</html>
Po drugie: u mnie wszystko działa tak jak powinno :P
nav napisał(a)
Mam nadzieję, że nie odpalasz pliku html przez dwuklik na ikonce, bo wtedy ajax nie ma szans działać :->
Nie możesz bawić się ajax'em w ten sposób, że masz na dysku ten plik i po prostu na niego klikasz. To nie przejdzie.
Wytłumacz sobie to w ten sposób, że zmienna request to odpowiedź serwera, więc potrzebny jest serwer do obsłużenia ajax'a. :)
Cały sens powyższego kodu to: js wysyła do serwera żądanie dostarczenia danych, serwer odpowiada przekazując te dane, po czym js je wyświetla. Czyli jak widzisz bez serwera się tu nie obejdzie. Zainstaluj sobie jakikolwiek serwer, np. xampp, umieść te pliki w katalogu na stronę i będzie pięknie działać. Będziesz się do tej strony wtedy odwoływał wywołując ją w przeglądarce np. http://localhost/strona.html