Aide AJAX débutant

billou87 -
billou87 - 18 août 2009 à 11:57

Bonjour,

Voici mon code AJAX, repris sur le net :

-la page html (exemple.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Essai AJAX</title>
<link rel="stylesheet" type="text/css" href='css/style.css'/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

</style>
<script language="Javascript">



</script>
</head>
<body><div>
<select id="action" name="action" onchange="execAction(this.value);">
<optgroup label="Choisissez une fonction">
<option value="0" selected="selected"> </option>
<option value="1">Alerte</option>
<option value="2">Afficher l'heure</option>
</optgroup>
</select>
</div>
<div id="contenu" name="contenu">

</div>

-la page php (exemple.php) :

<?php // Code PHP

header('Content-Type: text/html; charset=ISO-8859-1');

# on vérifie le paramètre
if (isset($_POST['action']) && is_numeric($_POST['action']))
$action = $_POST['action'];
else
$action = 0;

switch ($action)
{
case 0:
echo "Vous n'avez pas choisi d'action";
break;

case 1: #envoi d'une alerte et on efface le contenu
echo "document.getElementById('contenu').innerHTML = '';alert('action souhaitée: alerte!');";
break;

case 2: #affichage de l'heure dans le DIV
echo "document.getElementById('contenu').innerHTML = 'Hello world, il est ".date("H:i:s")."';";
break;

default:
echo "alert('Action inconnue.');";
break;
}
?>

J'ai repris ce code d'un tutoriel et j'essaie de comprendre comment fonctionne AJAX. Pourtant, malgré toutes mes vérifications, ce code ne marche pas et je n'arrive pas à trouver d'ou vient la faille ! Je cherche d'ailleurs à maitriser ce langage dans un but professionnel, car il me serait tres utile pour mon stage ! Donc si vous avez des tuyaux, je suis preneur !

Merci d'avance

Configuration: Windows XP
Firefox 3.5.2

Afficher la suite

5 réponses

Alain_42 Messages postés 5413 Statut Membre 904

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Essai AJAX</title>
<link rel="stylesheet" type="text/css" href='css/style.css'/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

</style>
<script type="text/javascript" language="Javascript">

<!--
var xmlHTTP;
//fonction de création de la requette AJAX
function GetXmlHttpObject()
{
var objXMLHttp = null;
if (window.XMLHttpRequest)
objXMLHttp=new XMLHttpRequest();
else if (window.ActiveXObject)
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
return objXMLHttp;
}

function execAction(action)
{
xmlHttp = GetXmlHttpObject(); //la on appelle la fonction de creation req

if (xmlHttp == null)
{
alert("Votre navigateur ne supporte pas les requêtes HTTP.");
return false;
}

var url="exemple.php";
/////on va dire a la req ce qu'il faut faire qd elle recevra la réponse
xmlHttp.onreadystatechange = function (){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) //il faut attendre que la reponse soit bien toute arrivée
//eval(xmlHttp.responseText);//je t'ai modifié un peu ça car je n'avais pas vu la réponse du script, perso je prefere mettre les fonctions directement dans le JS
//pour voir ce que tu reçoit dans une petite boite de  dialogue:
alert("Valeurs reçues: "+xmlHttp.responseText);
//et si tu veux afficher ça dans ton div "contenu":
document.getElementById('contenu').innerHTML=xmlHttp.responseText;
}
/////
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xmlHttp.send("action="+action.value); //la on envoie la selection de la liste
return true;
}

// -->

</script>
</head>
<body><div>
<select id="action" name="action" onchange="execAction(this.value);">
<optgroup label="Choisissez une fonction">
<option value="0" selected="selected"> </option>
<option value="1">Alerte</option>
<option value="2">Afficher l'heure</option>
</optgroup>
</select>
</div>
<div id="contenu" name="contenu"> 

</div>

-la page php (exemple.php) :

<?php // Code PHP

header('Content-Type: text/html; charset=ISO-8859-1');

// on vérifie le paramètre

//prend l'habitude mettre des {  } dans tes test if / else car si tu doit rajouter une ligne tu vas les oublier

if (isset($_POST['action']) && is_numeric($_POST['action'])){
    $action = $_POST['action'];
}else{
    $action = 0;
}

switch ($action)
{
case 0:
echo "Vous n'avez pas choisi d'action";
break;

case 1://envoi d'une alerte et on efface le contenu
echo "action souhaitée: alerte!";
break;

case 2://affichage de l'heure dans le DIV
echo "Hello world, il est ".date("H:i:s");
break;

default:
echo "Action inconnue";
break;
}
?>

Réponse 2 / 5
kij_82 Messages postés 4102 Date d'inscription Statut Contributeur Dernière intervention 857

Bonjour,

Au besoin, disons en complément de cet exemple que tu as déjà commencé à étudier, tu as cette astuce sur l'utilisation des objets XHR javascript : https://www.commentcamarche.net/faq/18745-utilisation-de-l-objet-xmlhttprequest
0
Réponse 3 / 5
billou87

Merci kij_82 pour ton lien, je lirai ça avec attention cet après-midi !
Alain_42 -> tu n'as fait qu'un simple copié collé ??
0
1. kij_82 Messages postés 4102 Date d'inscription Statut Contributeur Dernière intervention 857
  
  Il a fait un copier / coller certes, mais surtout en expliquant chaque partie du code, et peut-être même en rectifiant certaines lignes (je n'ai pas vraiment regardé)
  
  0
Réponse 4 / 5
Alain_42 Messages postés 5413 Statut Membre 904

tu as raison kij_82, j'ai copier coller son code en rectifiant et en prenant la peine de rajouter des commentaires d'explication

il faut que bilou les lise
0
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 5
billou87

Désolé Alain, je n'ai pas pris le temps de tout lire et je te remercie pour l'aide !
0

Aide AJAX débutant

5 réponses

Discussions similaires

Newsletters