[AJAX] Un Get en Ajax récalcitrant

Bonjour,

Je pensais au départ que mon souci était liée à une fichu bibliothèque de JQuery mais il semble que le souci soit plus profond...

Je suis sur une page html statique et je tente de faire un appel ajax à un programme externe qui fonctionne (en utilisant prototype j'ai bien les appels et les réponse du dit programme).

N'arrivant pas à codé l'appel via JQuery je suis revenu aux bases de l'ajax

Code:

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
51
52
53
54
55
// JavaScript Document
function getXhr(){
  var xhr = null; 
  if(window.XMLHttpRequest) // Firefox et autres
    xhr = new XMLHttpRequest(); 
  else if(window.ActiveXObject){ // Internet Explorer 
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
	}
  else { // XMLHttpRequest non supporté par le navigateur 
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    xhr = false; 
	} 
  return xhr
}
 
/**
* Méthode qui sera appelée sur le click du bouton
*/
function GoRechercheAnnuaire(annu_text , annu_critere , nb_start){
  var col_g_txt  = 	'<div id="col_gauche"><div><img alt="" class="float_left" src="images/interface/tetieres_coin_gauche1.gif" /><h2 class="tetiere4">Annuaire</h2></div><div id="autres_annu"><h4 class="droite couleur03">communaut&eacute;</h4>Vous pouvez &eacute;galement, sous Lotus, consulter les annuaires suivants :<br /><a href="#" class="js_lien_externe">Annuaire Aramice</a><br /><a href="#" class="js_lien_externe">Annuaire Audiens</a><br /><a href="#" class="js_lien_externe">Annuaire Novalis-Taitbout</a></div><div id="col_gauche_site"></div></div>';
//  alert('coucou annuaire_js qs,fmkqsflkmqsklfkqsmkfmqls');
//  alert(col_g_txt);
  var CompteArebours = new Date();
//  alert('seconde = ' + CompteArebours.getSeconds());
  var request = 'http://vpa1ddoe1/test/W3/offi.nsf/GoRechercheAnnuaire?OpenAgent&annuaire_text='+annu_text
	+'&annuaire_critere='+annu_critere+'&start='+nb_start+'&time=' + CompteArebours.getSeconds();
//	alert(request);
 
	document.getElementById("acc_content").innerHTML = col_g_txt + '<div id="col_centrale"></div>';
 
	var xhr = getXhr();
 
	xhr.open("GET",request,true);
 
  // On défini ce qu'on va faire quand on aura la réponse
  xhr.onreadystatechange = function(){
    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    if(xhr.readyState == 4){
      document.getElementById("col_centrale").innerHTML = "La réponse est revenu - ReadyStatus = " + xhr.readyState + " / status = " + xhr.status;
      if (xhr.status == 200){
        document.getElementById("col_centrale").innerHTML = xhr.responseText;
      }else{
        document.getElementById("col_centrale").innerHTML = "Problème la répone n'est pas 200 - status = " + xhr.status;
      }
    }else{
      document.getElementById("col_centrale").innerHTML = "La requet est en cours - ReadyStatus = " + xhr.readyState;
    }
  }
 
	xhr.send(null);
}

Le souci c'est que ma page se recharge mais ne garde pas mes modifications de contenu.
Tant que la requête n'est pas finaliser on voie bien le status changer dans le conteneur html "col_centrale" mais une fois la requête finaliser il semble que la page se recharge.

Voici le code du form html qui appel la fonction

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<form name="RechercheAnnuaire" onSubmit="GoRechercheAnnuaire($('#annuaire_text').val() , $('#annuaire_critere').val() , '0')">
	<div class="recherche_annuaire"><h5><label for="annuaire_text">Annuaire</label></h5>
		<input id="annuaire_text" type="text" value="ma recherche" onclick="$('annuaire_text').val('');" /><br />
		<label class="couleur02 gras par" for="annuaire_critere">par</label>
		<select id="annuaire_critere">
			<option value="Searchnom">nom</option>
			<option value="Searchprenom">pr&eacute;nom</option>
			<option value="Searchnumero_de_telephone_poste">n° de poste</option>
			<option value="Searchcode_etablissement">code &eacute;tablissement</option>
			<option value="Searchlieu_ville">localisation</option>
			<option value="Searchpiece">pi&egrave;ce</option>
			<option value="Searchresponsable">responsable</option>
			<option value="Searchlibelle_service">service</option>
			<option value="Searchlibelle_departement">branche</option>
		</select>
		<a onclik="submit()" style="cursor:pointer">
		<input class="recherche_annuaire_submit" src="images/interface/bouton_ok_fond_grisfonce.gif" title="Chercher dans l'annuaire" type="image" value="Ok" />
		</a>
	</div>
</form>