Bonjour les profs,
J'explique le principe de mon site :
On a 4 pages :
- test1.php
- test2.php
- msg.php
- addmsg.php
test1.php et test2.php : contient 2 textarea une pour la r�ception des donn�es un champs de texte et un bouton d'envoie, et des fonctions js pour r�cup�rer des donn�es en XML � partir de la page msg.php. Voil� le code :
test1.php
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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<script type="text/javascript">
window.name="test1";
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;
}
function get_data(xhr)
{
var docXML= xhr.responseXML;
var items= docXML.getElementsByTagName("donnee");
var date= docXML.getElementsByTagName("donnee2");
//on fait juste une boucle sur chaque élément "donnee" trouvé
document.getElementById("radar").className="radaroff";
//Effacer lle contenue de la div
document.getElementById("oldmsg").value="";
for (i=0;i<items.length;i++)
{ document.getElementById("oldmsg").value+=items.item(i).firstChild.data; }
}
function send()
{
var xhr=getXhr();
// Ici on va voir comment faire du post
xhr.open("POST","addmsg.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//récupérer les valeur depuis les éléments de la page actuelle pour les envoyés vers la div de l'autre page
var user = document.getElementById('user').value;
var msg = document.getElementById('msg').value;
xhr.send("user="+user+"&msg="+msg);
//actualiser la div de la page courante
actualiser();
}
function actualiser()
{
var xhr=getXhr();
//on définit l'appel de la fonction au retour serveur
xhr.onreadystatechange = function() { get_data(xhr); };
//on affiche le message d'acceuil
document.getElementById("radar").className="radaron";
//on appelle le fichier reponse.txt
xhr.open("POST", "msg.php", true);
xhr.send(null);
}
</script>
<style type="text/css">
.radaron{
visibility:visible;
}
.radaroff{
visibility:hidden;
}
</style>
</head>
<body onload="javascript:actualiser();">
<div class="radaroff" id="radar"><img src="radar.gif" height="32" width="32" /></div>
<textarea id="oldmsg" rows="15" cols="50" disabled="disabled"></textarea><br>
<br><br>
Utilisateur : <input type="text" id="user" /><br><br>
Message :<br>
<textarea id="msg" rows="5" cols="50"></textarea><br /><br />
<input type="button" value="Envoyer" onclick='javascript:send(); actualiser_dest();'/>
</body>
</html> |
test2.php
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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<script type="text/javascript">
window.name="test2";
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;
}
function get_data(xhr)
{
var docXML= xhr.responseXML;
var items= docXML.getElementsByTagName("donnee");
var date= docXML.getElementsByTagName("donnee2");
//on fait juste une boucle sur chaque élément "donnee" trouvé
document.getElementById("radar").className="radaroff";
//Effacer lle contenue de la div
document.getElementById("oldmsg").value="";
for (i=0;i<items.length;i++)
{ document.getElementById("oldmsg").value+=items.item(i).firstChild.data; }
}
function send()
{
var xhr=getXhr();
// Ici on va voir comment faire du post
xhr.open("POST","addmsg.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//récupérer les valeur depuis les éléments de la page actuelle pour les envoyés vers la div de l'autre page
var user = document.getElementById('user').value;
var msg = document.getElementById('msg').value;
xhr.send("user="+user+"&msg="+msg);
//actualiser la div de la page courante
actualiser();
}
function actualiser()
{
var xhr=getXhr();
//on définit l'appel de la fonction au retour serveur
xhr.onreadystatechange = function() { get_data(xhr); };
//on affiche le message d'acceuil
document.getElementById("radar").className="radaron";
//on appelle le fichier reponse.txt
xhr.open("POST", "msg.php", true);
xhr.send(null);
}
</script>
<style type="text/css">
.radaron{
visibility:visible;
}
.radaroff{
visibility:hidden;
}
</style>
</head>
<body onload="javascript:actualiser();">
<div class="radaroff" id="radar"><img src="radar.gif" height="32" width="32" /></div>
<textarea id="oldmsg" rows="15" cols="50" disabled="disabled"></textarea><br>
<br><br>
Utilisateur : <input type="text" id="user" /><br><br>
Message :<br>
<textarea id="msg" rows="5" cols="50"></textarea><br /><br />
<input type="button" value="Envoyer" onclick='javascript:send(); actualiser_dest();'/>
</body>
</html> |
msg.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
|
<?php
//Notez la ligne header('Content-Type: text/xml'); très importante c'est ce qui permet à PHP de dire au navigateur le format du fichier retourné.
header('Content-Type: text/xml');
echo "<?xml version=\"1.0\"?>\n";
echo "<exemple>\n";
//on connecte a la BDD
require_once("cnx.php");
//on lance la requete
$a=mysql_query("select * from messages order by date") or die("Erreur de séléction : ".mysql_error($cnx));
//On boucle sur le resultat
while ($row = mysql_fetch_array($a))
{
echo "<donnee>".$row['user']." dit : ".$row['msg']."\n ______________________ \n</donnee>\n";
}
echo "</exemple>\n";
?> |
addmsg.php
1 2 3 4 5 6 7 8 9
|
<?php
if(isset($_POST["user"])){
require_once('cnx.php');
$user=$_POST['user'];
$msg=$_POST['msg'];
mysql_query("insert into messages (user,msg) values ('$user','$msg')") or die("Erreur d'insertion : ".mysql_error());
}
?> |
Quand on clique sur le bouton envoyer la fonction send(); envoie les donn�e via POST vers addmsg.php cette derni�re contient une requ�te SQL d'insertion dans la table messages comme pr�sent� dans le code.
Je clique sur le bouton envoyer de test1.php le texte s'ajout correctement dans le textarea de mani�re asynchrone sans recharger la page test1.php (AJAX) mais mon but c'est d'actualiser au m�me temps la valeur du textearea dans la page test2 au moment de l'insertion on utilisant qlq chose du genre
<script type="text/javascript"> test2.document.getElementById('msg').value=document.getElementById('msg'); </script>
Mais apr�s une langue recherche je n'ai pas r�ussis � trouver un fonction js qui r�cup�re le nom d'une autre page ou bien d�acc�der au valeur des champs de test2.php � partir de test1.php.
D�soler pour la langueur du sujet
mais c vraiment urgent dans mon projet de stage , et Merci d'avance...
Partager