Bonjour, bonsoir !

Voilà, j'ai deux fichiers XML qui contiennent chacun un catalogue de CD, comme ceci :
Code XML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="ISO-8859-1"?>
<CATALOG>
	<CD>
		<TITLE>--</TITLE>
		<ARTIST>--</ARTIST>
		<COUNTRY>--</COUNTRY>
		<COMPANY>--</COMPANY>
		<PRICE>--</PRICE>
		<YEAR>--</YEAR>
	</CD>
	<CD>
		<TITLE>--</TITLE>
		<ARTIST>--</ARTIST>
		<COUNTRY>--</COUNTRY>
		<COMPANY>--</COMPANY>
		<PRICE>--</PRICE>
		<YEAR>--</YEAR>
	</CD>
</CATALOG>
Je précise que ces deux fichiers n'ont pas le même nombre de CD.

Dans une page HTML, je veux pouvoir faire apparaître ces deux catalogues, à l'aide d'une liste déroulante. Voilà ce que j'ai dans ce fichier HTML :
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
 
<form name="formulaire">
	<select name="select">
		<option value="cd_catalog.xml">Catalogue 1</option>
		<option value="cd_catalog2.xml">Catalogue 2</option>
	</select>
	<input type="button" value="Regarder" onclick="verification()" />
	<input type="text" name="result" />
</form>
 
<script>        
        function verification()
        {
                formulaire.result.value = formulaire.select.value;
        
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET",formulaire.result.value,false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
 
document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
  { 
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");
  }
document.write("</table>");
 
}
</script>
 
</body>
</html>

Alors, ça marche, mais le problème, c'est que ça efface la page quand je charge le tableau.
Est ce qu'il y a moyen de contourner le problème ?

Je vous remercie !