[AJAX] AJAX IE vs FFX et balises non reconnues

Version imprimable

Bonjour bonjour.

Voila je voudrai faire de l'ajax sur mon site internet.

voici le JS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function addToDiv(txt) {
document.getElementById("dData").innerHTML = txt;
}
function text(txt){
var xhr_object = null;
 
if(window.XMLHttpRequest) // Firefox
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}
 
xhr_object.open("GET", txt, false);
 
xhr_object.onreadystatechange = function () {
if(xhr_object.readyState == 4) addToDiv(xhr_object.responseText);
}
 
xhr_object.send(null);
}

et le html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div align="center">
<a class="nouscontacter" onclick="text('test.txt');" href="#" >► Nous contacter ◄</a></div>
 
<div align="center">
<a class="nouscontacter" onclick="text('test2.txt');" href="#" >► Accueil ◄</a></div>
 
<div id="dData"></div>
 
fichier test.txt:
<br />
<br />
test ok c'est cool!!!!
<br />
fsuifhseuf
<br />
marrtin
fzqifhsjgokejqfqef

fichier test2.txt:

Code:

1
2
3
4
5
6
7
<br />
<br />
<center><p color="#0000FF">
ok ca aussi ca marche</p>
<a href="">salut</a>
<img src="image/img1.jpg" alt="" />
</center>

Voici le probleme:
-Sous firefox ca ne fonctionne pas.
-Certaine balise ne sont pas reconnue: les <br /><p color=""> ne fonctionne pas mais la balise <center> elle fonctionne.

Merci d'avance
titioux

bonsoir,

ton JS est incorrecte : exemple : (equivalant à ta fonction "text(txt)")

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
 
function test1() {
var l1    = f.elements["list1"];
var l2    = f.elements["list2"];
var index = l1.selectedIndex;
if(index < 1)
   l2.options.length = 0;
else {
   var xhr_object = null;
 
   if(window.XMLHttpRequest) // Firefox
      xhr_object = new XMLHttpRequest();
   else if(window.ActiveXObject) // Internet Explorer
      xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
   else { // XMLHttpRequest non supporté par le navigateur
      alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
      return;
   }
 
   xhr_object.open("POST", "species.php", true);
 
   xhr_object.onreadystatechange = function() {
      if(xhr_object.readyState == 4)
         eval(xhr_object.responseText);
   }
 
   xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   var data = "family="+escape(l1.options[index].value)+"&form="+f.name+"&select=list2";
   xhr_object.send(data);}

tu as séparé des infos qui ne doivent pas être séparé

Code:

1
2
 
xhr_object.open("GET", txt, false);

cette ligne est tout seule

en gros seul tu code javascript ne fonctionne pas

pour la reconnaissance de tes deux fichiers c'est normal se ne sont des fichiers html

et pour déclarer des style comme color utilise la balise style :

Code:

1
2
 
<input type="text" style="background-color: #0000FF;" />

11/04/2008, 18h00
le_chomeur

de plus au vue de ton code , je t'inviterais a lire un très bon tutorial pour apréhender et comprendre les mécanismes et problème que tu pourrais avoir par la suite :

http://gael-donat.developpez.com/web/intro-ajax/

:)
11/04/2008, 18h09
kenny.kev

excellent tuto merci

J'ai suivis le tuto que tu ma donné merci.

Mais j'ai un problème pour inséré le contenu de la réponse XML dans ma page.

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
 
Voici le JS:
 
 function ajax()
{
    var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { addtodiv(xhr); };
 
    //on appelle le fichier reponse.txt
    xhr.open("GET", "creetext.php", true);
    xhr.send(null);
}
 
function addtodiv(xhr)
{
	var docXML= xhr.responseXML;
	document.getElementById("dData").innerXML = docXML;
}

Voici creetext.php:

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
 
<?php 
header('Content-Type: text/xml'); 
//on connecte a la BDD
$dbhost="localhost";
$dbuser="root";
$dbpass="17951";
 
$dblink=mysql_connect($dbhost,$dbuser,$dbpass);
mysql_select_db("toto",$dblink);
 
mysql_db_query("toto","TRUNCATE entreprise");
mysql_db_query("toto","INSERT INTO entreprise ( texte ) VALUES ('bonjour mysql marche bien <br /> retour a la ligne <br /> <center> center </center>')");
 
 
$query = "SELECT * FROM entreprise";
$result = mysql_query($query,$dblink) or die (mysql_error($dblink));
 
 
 
 
$row = mysql_fetch_array($result, MYSQL_NUM);
echo $row[0];
echo 'ok<br />';
 
 
echo 'fin';
?>

et voici tjr le même html:

Code:

1
2
3
4
5
 
<div align="center">
<a class="nouscontacter" onclick="ajax();" href="#" >► Accueil ◄</a></div>
 
<div id="dData"></div>

J'ai installé un debugger sur FF, il prend bien en compte les requête que je lui fait, il reçoit bien le contenue de la DB mais ne l'insert pas dans la page html.

Voila merci d'avance

14/04/2008, 13h07
kenny.kev
inverse les deux ligne suivante :
Code:

1 2 xhr.onreadystatechange = function() { addtodiv(xhr); };
Code:

1 2 xhr.open("GET", "creetext.php", true);
Car en gros du écrit en puis tu ouvre ton document
14/04/2008, 13h47
titioux

Merci j'ai fini par trouvé en:

var docXML= xhr.responseText; au lieu de var docXML= xhr.responseXML;

L'informatique m'étonnera toujours!!!!! :mouarf:

Merci beaucoup. :king: