Aide AJAX débutant
billou87
-
billou87 -
billou87 -
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">
<!--
var xmlHTTP;
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();
if (xmlHttp == null)
{
alert("Votre navigateur ne supporte pas les requêtes HTTP.");
return false;
}
var url="exemple.php";
xmlHttp.onreadystatechange = function (){
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
eval(xmlHttp.responseText);
}
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xmlHttp.send("action="+action.value);
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
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
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">
<!--
var xmlHTTP;
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();
if (xmlHttp == null)
{
alert("Votre navigateur ne supporte pas les requêtes HTTP.");
return false;
}
var url="exemple.php";
xmlHttp.onreadystatechange = function (){
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
eval(xmlHttp.responseText);
}
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xmlHttp.send("action="+action.value);
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
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
A voir également:
- Aide AJAX débutant
- Logiciel montage vidéo débutant - Guide
- Logiciel de programmation pour débutant - Guide
- Platine dj debutant - Forum Enregistrement / Traitement audio
- Apprendre le coran pour débutant (+ pdf) - Télécharger - Histoire & Religion
- Formation sap débutant pdf - Forum Logiciels
5 réponses
<!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;
}
?>
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
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
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é ??
Alain_42 -> tu n'as fait qu'un simple copié collé ??
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
il faut que bilou les lise
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question