Sujet Précédent Sujet Suivant

Requete ajax

Fermé
BaptisteDebes Messages postés 90 Date d'inscription mardi 8 mai 2012 Statut Membre Dernière intervention 14 octobre 2013 - 1 sept. 2012 à 22:55
BaptisteDebes Messages postés 90 Date d'inscription mardi 8 mai 2012 Statut Membre Dernière intervention 14 octobre 2013 - 4 sept. 2012 à 22:31
Bonjour,



J'essaie d'apprendre ajax pour m'entraîner je tente de créer un chat pour ça j'ai créer une page qui recherche les message et les retourne er une autre qui affiche cette page en javascript mais le code que j'ai trouvé et tous pourris et j'aimerai savoir si c'est possible de me l'améliorer car j'aimerai que celle -ci soit dynamique ,quelle rafraichisse les données sans rafraichîr la page .

<script type="text/javascript">


function exemple()
{
obj = document.getElementById("resultat");
// ON AFFICHE UNE PREMIERE LIGNE DANS LE DIV
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);
// ON APPELLE LA PAGE
xhr_object.open("GET", "/foo.php", false);
xhr_object.send(null);

// ON AFFICHE LE RESULTAT DANS LE DIV
document.write (+xhr_object.responseText);

}
</script>

Merci d'avance

14 réponses

Réponse 1 / 14
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
2 sept. 2012 à 14:00
le principe Ajax:
- une seule page html (ou php)
- sur un événement dans cette page (click sur un bouton, une tempo etc..) on appelle une requette Ajax
- cette requette appelle en "arrière plan" un script php sur le serveur
- ce script lit les données dans la BDD par exemple et renvoie la réponse
- lorsque la réponse est entièrement reçue par Ajax, la fct l'écrit dans un div de la page, donc sans recharger la page

un exemple: 
<script type="text/javascript">
		/////// fonctions Ajax ///
//fonction de base de creation de la request ------------------------------------------
function getXMLHttpRequest(){
	var XHR = false;
		//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            XHR = new XMLHttpRequest();
            if (XHR.overrideMimeType) {
                XHR.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
            }
        } else if (window.ActiveXObject) { // IE
            try {
                XHR = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    XHR = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!XHR) {
            alert('Abandon : Impossible de créer une instance XMLHTTP');
            return false;
        }
	return XHR;  
}
/////// --------------------------------------------------------------------------
/// fonction requette Ajax, celle appellée par un evenemnt dans la page

function requette_Ajax(url,id_resultat) { 
	//lors de l'appel de la fonction, arguments passés: l'url du script php a appeler, et l'id du div où on va écrire la réponse
	//création de la requette
	var XHR = getXMLHttpRequest(); 
	 //on définit ce qu'on doit faire lorsqu'on recevra la réponse du script php
	XHR.onreadystatechange = function (){traitement_reponse(XHR,id_resultat);} 
	//je préfère la methode POST à GET
	XHR.open('POST', url, true);
	//changer le type MIME de la requête pour envoyer les données avec la méthode POST ,  !!!! cette ligne doit etre absolument apres XHR.open('POST'....
	XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');	
	//envoi de la requette vers le script php, a noter que tu peux si besoin lui envoyer une ou plusieurs valeurs
	XHR.send(null);	
	
}
//fonction qui va traiter la réponse
function traitement_reponse(XHR,id_resultat){
	//on verifie que la reponse est bien completement reçue
	if(XHR.readyState == 4 ){
		if(XHR.status == 200) {
				// cas avec reponse de PHP en mode text				
				var reponse=XHR.responseText;
				///TEST
					// et la on peut pour les tests visualiser dans une boite d'alert la réponse
					alert("reponse du script PHP: "+reponse);
				/// fin TEST
				//on ecrit la réponse dans le div par un innerHTML
				document.getElementById(id_resultat).innerHTML=reponse;				
			}
		}
}
</script> 

<body>
<!-- ci dessous sur un evenement, le click sur le bouton rafraichier, on appelle la fct requette_Ajax en lui passant en arguments:
- le nom du script php appellé, celui qui va lire les messages dans la BDD)
 - l'id du div où on veut ecrire la réponse (les messages)
 -->
<input type="button" name="rafraichir" id="rafraichir" value="rafraicir" onclick="requette_Ajax('scriptPhpReponse_a_Ajax.php','zone_messages';" />
<br />
<div id="zone_messages"><!-- ici sera écrit la réponse, c a d les mesages envoyes par le script php  --></div>

</body>

exemple de script php de réponse à Ajax (une réponse toute simple la date et l'heure)

 scriptPhpReponse_a_Ajax.php

<?php
$reponse=date("d/m/Y H:i:s");

//envoi de la réponse à Ajax
echo $reponse;

?>


il existe aussi une autre méthode en utilisant un Framework jQuery, mais essayes déjà de comprendre le principe avec la méthode "classique"
1
Réponse 2 / 14
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
2 sept. 2012 à 16:49
pour un rafraichissement à intervale régulier il faut utiliser la fonction setTimeout de javascript
1
Réponse 3 / 14
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
Modifié par Alain_42 le 2/09/2012 à 17:01
voilà un exemple en utilisant jQuery et setTimeout (rafraîchissement toutes les 5 000 millisecondes)

il suffit que tu télécharges jquery-1.3.2.min.js et que tu le mettes à la racine de ton site dans un répertoire jquery/

tu vois c'est assez simple 

<!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> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <script type="text/javascript" src="jquery/jquery-1.3.2.min.js "></script> 
    <script type="text/javascript">  
  $(document).ready(function() {rafraichissement();}) 
  function rafraichissement(){ 
     
    $.ajax({ 
     type: "POST", 
     url:"scriptPHP_reponse_a_ajax.php",         
     success:function(data) {      
      $('#div_reponse').html(data); 
       
      setTimeout("rafraichissement()", 5000); 
     } 
    }); 
    
  }; 
  
    </script>            
        </head> 
        <body> 
   ......................... 
    <div id="div_reponse"><!-- ici sera ecrite la réponse de php a la demande de rafraichissement --></div>       
        </body> 
</html>
1
Réponse 4 / 14
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
2 sept. 2012 à 20:05
il ne faut pas mettre setTimeout sur toutes les fonctions !

tu vois bien que la fct requette ajax appelle getXMLHTTPRequest et a la réponse appelle traitement_reponse

donc il faut mettre seulement setTimeout("requette_Ajax('scriptPhpReponse_a_Ajax.php','zone_messages');",400); mais avec 400 ça veut dire un rafraichissement outes les 0,4 secondes

il faut le temps que ça s'affiche qd même

essayes avec le code jquery de mon dernier post
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 14
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
2 sept. 2012 à 20:38
avec cet exemple et les commentaires tu devrait t'en sortir 

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<script type="text/javascript" src="jquery/jquery-1.3.2.min.js "></script>
    <script type="text/javascript">
		//ligne ci dessous des que la page est finie de charger on lance une premiere fois la focntion rafraichissement pour charger les messages
		$(document).ready(function() {rafraichissement();})
		//voici la fonction rafraichissement
		function rafraichissement(){
			//elle fait appel a jquery
				//on definit les parametres ajax
				// le type  => POST ou GET
				//le script php appelé
				//la fonction qui va traiter la réponse lorsqu'elle va arriver: div_reponse c'est l'id du div dans lequel ça va ecrire data
				//SetTimeout c'est la tempo qui relance le rafaichissement a intervales réguliers 5 sec ici
				$.ajax({
					type: "POST",
					url:"scriptPHP_reponse_a_ajax.php",
								
					success:function(data) {					
						$('#div_reponse').html(data);
						setTimeout("rafraichissement()", 5000);
				});
		};
	
    </script>           
        </head>
        <body>
			la tu as le reste de ta page
				<div id="div_reponse"><!-- ici sera ecrite la réponse de php a la demande de rafraichissement c a dire les messages--></div> 
					la aussi
        </body>
</html>
1
Réponse 6 / 14
BaptisteDebes Messages postés 90 Date d'inscription mardi 8 mai 2012 Statut Membre Dernière intervention 14 octobre 2013
2 sept. 2012 à 14:43
merci j'ai réussi à comprendre mais comment faire pour que la fonction se régénère avec un tempo(seconde) je ne connais le vocabulaire dans le jargon .

merci d'avance
0
Réponse 7 / 14
BaptisteDebes Messages postés 90 Date d'inscription mardi 8 mai 2012 Statut Membre Dernière intervention 14 octobre 2013
2 sept. 2012 à 18:04
désolé mais je n'arrive pas à faire ce que vous me dites , je veux juste que la page se recharge tel un flux continue pour ça j'ai éssayé ce code mais ça ne marche pas
:

setTimeout("getXMLHttpRequest()",200);

setTimeout("requette_Ajax('scriptPhpReponse_a_Ajax.php','zone_messages');",400);
setTimeout("traitement_reponse(XHR,id_resultat);",1000);
0
Réponse 8 / 14
BaptisteDebes Messages postés 90 Date d'inscription mardi 8 mai 2012 Statut Membre Dernière intervention 14 octobre 2013
2 sept. 2012 à 20:07
Merci mais pouvais m'expliquer c'est étapes et comment puis-je l'intégrer à votre code

script type="text/javascript">
$(document).ready(function() {rafraichissement();})
function rafraichissement(){

$.ajax({
type: "POST",
url:"scriptPHP_reponse_a_ajax.php",
success:function(data) {
$('#div_reponse').html(data);

setTimeout("rafraichissement()", 5000);
}
});

};

</script>
0
Réponse 9 / 14
BaptisteDebes Messages postés 90 Date d'inscription mardi 8 mai 2012 Statut Membre Dernière intervention 14 octobre 2013
2 sept. 2012 à 21:05
le code ne fonctionne pas pourtant j'ai mis la librairie que vous m'aviez dites et j'ai tanter toutes les possibilités mais ça ne fonctionne pas.
0
Réponse 10 / 14
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
2 sept. 2012 à 21:46
chez moi ça marche avec un script php tout simple

es tu sur de ton script php ?

as tu bien mis la librairie dans un repertoire jquery/
0
Réponse 11 / 14
BaptisteDebes Messages postés 90 Date d'inscription mardi 8 mai 2012 Statut Membre Dernière intervention 14 octobre 2013
2 sept. 2012 à 21:59
oui j'ai tout à fait installer correctement la librairie sur la page noté dans url:

j'ai mis un echo pour test mais même ça ça ne marche pas peut être que si vous me passiez vos 2 pages merci.
0
Réponse 12 / 14
BaptisteDebes Messages postés 90 Date d'inscription mardi 8 mai 2012 Statut Membre Dernière intervention 14 octobre 2013
3 sept. 2012 à 16:40
up
0
Réponse 13 / 14
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
4 sept. 2012 à 21:20
bonsoir, me revoilà

effectivement il avait qqs erreurs dans mon fichier un copier coller malheureux en voulant adapter à ton cas, ci joint la page 

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<script type="text/javascript" src="jquery/jquery-1.3.2.min.js "></script>
    <script type="text/javascript">
		//ligne ci dessous des que la page est finie de charger on lance une premiere fois la focntion rafraichissement pour charger les messages
		$(document).ready(function() {rafraichissement();});
		
		//voici la fonction rafraichissement
		function rafraichissement(){
			//elle fait appel a jquery
				//on definit les parametres ajax
				// le type  => POST ou GET
				//le script php appelé
				//la fonction qui va traiter la réponse lorsqu'elle va arriver: div_reponse c'est l'id du div dans lequel ça va ecrire data
				//SetTimeout c'est la tempo qui relance le rafaichissement a intervales réguliers 5 sec ici
				$.ajax({
					type: "POST",
					url:"scriptPHP_reponse_a_ajax3.php",
								
					success:function(data) {					
						$('#div_reponse').html(data);
						setTimeout("rafraichissement()", 5000);
					}
				});
		}
		//attention il y avait qqs erreurs d'accolades lignes ci dessus
	
    </script>           
        </head>
        <body>
			la tu as le reste de ta page<br /><br /><br /><br />
				<div id="div_reponse"><!-- ici sera ecrite la réponse de php a la demande de rafraichissement c a dire les messages--></div> 
					<br /><br />la aussi<br /><br />
        </body>
</html>


et le petit fichier de test scriptPHP_reponse_a_ajax3.php: 
<?php
		/// script php appele par Ajax: scripPHP_reponse_a_ajax
	
	//réponse bidon, bien sur avec cette valeur tu peux interroger une BDD etc...
	
		$reponse ="Bonjour, il est ".date("h:i:s"); 
		
		//envoi de la réponse à Ajax
		echo $reponse;
?>


la j'ai eu le temps de tester et ça marche
0
Réponse 14 / 14
BaptisteDebes Messages postés 90 Date d'inscription mardi 8 mai 2012 Statut Membre Dernière intervention 14 octobre 2013
4 sept. 2012 à 22:31
Au mon dieu fantastique ça marche mille merci!!!!
0

Discussions similaires

problème avec graphQL
dancris11 -
hachel58 -

50 réponses
La requête GraphQL n’est pas autorisée
Mansour -
jaccou -

17 réponses
Market Place "Erreur lors de l'envoi de la requête"
JobnatureAloevera -
Radinoz -

5 réponses
Blocage sécurité
Utilisateur anonyme -
Utilisateur anonyme -

4 réponses
Accès refusé tache planifiées
ap3969 -
ap3969 -

5 réponses