Keskustelu: Nettisivujen teko: Ajax ja XML-dokumentin listaus

ajv [11.10.2006 17:56:36]

Tuli tuossa hyvä tilaisuus opetella ajaxia ja heti meni sormi suuhun JavaScriptin kanssa.

Mulla on xml-dokumentti, jossa dataa muodossa:

<root>
	<TestPlace id="1">
		<Cycles>1345</Cycles>
		<Runtime>25644</Runtime>
	</TestPlace>
</root>

Tuo data haetaan XMLHttpRequestilla seuraavasti:

http.open("GET", "xmlrequest.php?act=testdetails&testplace=" + escape(PlaceNumber), true)
http.onreadystatechange = GetTestDetailsResponse
http.send(null)

Sitten tulee varsinainen ongelma. Haluaisin muodostaa xml-dokumentista seuraavanlaisen taulukon:

<table>
   <tr>
      <td>Cycles:</td>
      <td>1345</td>
   </tr>
   <tr>
      <td>Runtime</td>
      <td>25664</td>
   </tr>
</table>

, mutta miten ihmeessä saan JavaScriptillä tehtyä tuon dynaamisesti? Tässä yritys joka toimii, mutta ei ole dynaaminen:

function GetTestDetailsResponse(){
	if(http.readyState == 4){
		var response = http.responseXML.documentElement;
		x=response.getElementsByTagName("TestPlace")
		txt = ""

		xx=x[0].getElementsByTagName("Cycles")
		txt = txt + '<tr><td class="headercell">Cycles</td>'
		txt = txt + '<td>' + xx[0].firstChild.data + '</td></tr>'

		xx=x[0].getElementsByTagName("Runtime")
		txt = txt + '<tr><td class="headercell">Runtime</td>'
		txt = txt + '<td>' + xx[0].firstChild.data + '</td></tr>'

		txt = '<table class="testdetails">' + txt + "</table>"
		document.getElementById(PlaceNumber+'div').innerHTML = txt
		document.getElementById(PlaceNumber+'div').style.display = 'block'
	}
}

Osaisikohan joku lonkalta heittää miten saisin tuon dynaamiseksi? Yritin googlen avulla selvitellä tuon http.responseXML.documentElement -objektin(?) rakennetta, mutta huonolla menestyksellä... Vai onko jopa xml-dokumenttini rakenne vääränlainen?

Olga [11.10.2006 18:55:41]

Mitä tarkoitat dynaamisuudella? Itse en ole xml-tiedostoa käsitellyt Ajaxilla, mutta onko tuo documentElement tarpeellinen? Eikö xml-puu löydy ihan tuolta http.responseXML:stä?

ajv [12.10.2006 08:35:51]

Dynaamisuudella tarkoitan sitä, että saisin listattua nuo kaikki <testplace>-solmun(?) lapset(?) siten, että GetTestDetailsResponse()-funktiossa ei tarvitsisi etukäteen tietää noiden lapsien nimiä (Cycles, Runtime). Jos siis muutan tietokantahakua tuolla xml-dokumentissa, ei tarvitsisi Ajaxia päivittää, vaan se tekisi xml-puusta automaattisesti sen taulukon.

Pikkasen on vielä hakusessa nuo xml:n termit... Korjatkaa toki, jos meni jotain väärin.

ajv [13.10.2006 12:40:10]

Noniin, ongelma ratkesi hyvin nukutun yön jälkeen. Tässä vielä nopea ratkaisu, jolla sain toimimaan:

function GetTestDetailsResponse(){
	PlaceNumber = Dest
	if(http.readyState == 4){
		var response = http.responseXML.documentElement
		txt = ""
		var n = response.firstChild;
		//n = n.nextSibling
		while (n != null){
			if (n.nodeType == 1){
				k = n.firstChild
				while (k != null){
					if (k.nodeType == 1){
						try{
							l = k.firstChild
							txt = txt + '<tr><td class="headercell">' + k.nodeName + '</td><td>' + l.nodeValue + '</td></tr>'

						}catch(er){
							txt = txt + '<tr><td class="headercell">' + k.nodeName + '</td><td>0</td></tr>'
						}
					}
					k = k.nextSibling
				}
			}
			n = n.nextSibling
		}

		txt = '<table class="testdetails">' + txt + "</table>"
		document.getElementById(PlaceNumber+'div').innerHTML = txt
		document.getElementById(PlaceNumber+'div').style.display = 'block'
	}
}

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen