Discussion :

[titioux]

Bonjour bonjour.

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

voici le JS:

Code :

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
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 :

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
<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[kenny.kev]

bonsoir,

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

Code :

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
 
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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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/

[kenny.kev]

excellent tuto merci

[titioux]

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 :

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
 
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 :

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
 
<?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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[kenny.kev]

inverse les deux ligne suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
xhr.open("GET", "creetext.php", true);

Car en gros du écrit en puis tu ouvre ton document

[titioux]

Merci j'ai fini par trouvé en:

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

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

Merci beaucoup.