Affichage d'informations

Bonjours à tous,

Je début en ce moment en AJAX (langage par ailleurs très intéressant)
Le problème est que je n’ai trouver aucun site qui détaillé vraiment tout de A à Z sur le sujet.

Et j’aurais voulu savoir comment faire pour par exemple récupérer les infos d’une table SQL, puis en afficher la liste tout simplement.

Si quelqu’un aurait un ptit peu de temps à m’accorder pour m’expliquer le fonctionnement et comment faire sa serait vraiment sympa.

Merci beaucoup d’avance et bonne soirée :wink:

L’Ajax c’est pas un langage, c’est juste une méthode de conception, qui regroupe plusieurs type de langage à savoir : Un langage de présentation ( HTML/CSS, souvant ), Un langage serveur ( PHP/ASP, par exemple ), et un langage client ( Javascript ). Donc on peut faire un site avec une technologie “Ajax”, mais pas codé en Ajax :slight_smile:

Sinon pour ce qui est de ton soucis, il faut d’abord faire un page qui va récupéré les informations de ta base de donné, les metres en forme, et le tout sera injecté avec le javascript dans la page en cours. On supose que tu utilises de php ( Vu que tu le l’as pas précisé ), tu crées une page “maTable.xhr.php”, dans cette page tu fais tes requettes et le mise en balise de tes données (tableau par exemple). Une page maPage.php qui va faire appelle à ta script Javascript qui géré l’ajax “monAjax.js”, tu fait un bouton qui déclenche la fonction Ajax et qui fait exécuté la page php de base de donnée et tu injectes tes donné dans la page en cours ( dans un div par exemple la plus part du temps ), ensuite tu met tout en forme avec du CSS !
Le tour est joué !

Pour trouvé un fonction Ajax en Javascript si tu ne sait pas la faire toi meme : google.fr
Pour le langage serveur : php par exemple
et pour le css & html : google encore :stuck_out_tongue:

Merci pour la théorie^^

Maintenant jpense que des exemples me feront plus facilement passer à la pratique :smiley:

maPage.php


<!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>
<title>maPage qu'elle est bien</title>
<script type='text/javascript' src='Ajax.js'></script>
</head>
<body>
<div class="titre">Ma page !</div>
<div class="corp" id="corpPage"></div>
<a href="#" onclick="javascript:aJax( 'maTable.xhr.php', 'corpPage' );" >Afficher maTable</a>
</body>
</html>

Ajax.js : C’est un exemple, ya plien de solution possible pour ajuster à ses besoins biensur.


function aJax( pageToLoad , elementId ) {
	var xmlhttp;

	if ( typeof XMLHttpRequest != 'undefined' ) {
		try {
			xmlhttp = new XMLHttpRequest();
		} catch(e) {
			xmlhttp = false;
		}
	} else {
		try {
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
				xmlhttp = false;
			}
		}
	}
	
	function loadFragmentInToElement(fragment_url, element_id) {
		var element = document.getElementById(element_id);
		element.innerHTML = ' Chargement..<br>';
		xmlhttp.open("GET", fragment_url);
		xmlhttp.onreadystatechange = function() {
		  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
		  element.innerHTML = xmlhttp.responseText;
		  }
		}
		xmlhttp.send(null);
	} 
	loadFragmentInToElement( pageToLoad, elementId );
}

maTable.xhr.php


if( mysql_connect( ... ) ) {
 $sql['maTable'] = 'SELECT * FROM `maTable` LIMIT 10;';
 $req['maTable'] = mysql_query( $sql['maTable'] );
 if( mysql_num_rows( $req['maTable'] ) > 0 ) {
  while() {
  //.. on affiche
  }
 }
 mysql_free_result( $req['maTable'] );
}

Edité le 27/05/2008 à 21:20

Whaou merci beaucoup sa fait plaisir d’avoir enfin un résultat complet et bien expliquer.

Par contre jme posais une autre question comment peut on faire pour que par exemple je souhaite récupérer uniquement le contenu placé entre les balise

Balises étant placé dans le contenu généré par le fichier maTable.xhr.php selon l’exemple que tu m’as donné.

Merci encore beaucoup jvais pouvoir bien m’amuser jsens^^

Edit : a jvoulais aussi savoir parce que au fur et à mesure que j’apprends, jvais essayer d’améliorer le script, j’aurais voulu savoir si avec ce genre de script on pouvait supprimer une seul ligne de la liste dynamiquement ?
Edité le 27/05/2008 à 22:32

Alors pour repondre dans l’ordre :

  • Pour les balises ca serais possible avec des exprésions réguliere etc, mais c’est vraiment pas la solution qu’il faut adopté! Je m’explique :
    La solution Ajax te permet chargé en cache avec Javascript un page et de modifier le contenu HTML d’une balise avec les données reçu, il faut simplement traité ces donné, AVANT l’envois, enfin qu’il ne te reste plus que les données utile ! Exemple tu bêtes qui va te faire comprendre je l’espere :

maTable.xhr.php :
Tu ne metera pas :


<?php
echo 'Voilà les données que je veux injecté dans ma page<toto>';
echo 'blabla';
echo '</toto>';
?>

Ce qui est complétement debile, d’apres reparsé les données en javascript pour extraire la balise
alors que :


echo 'blabla';

coule bien plus de source…

Pour ta deuxième question :
Tu as encore une fois une grosse technologie donc le but principal est de charger des pages (en cache) et dans affiché le contenue sur la page actuel (ou pas, on est pas obligé). Alors tu peut passé des parametres en GET aux pages que tu appelles (avec ma fonction ca donnerais aJax( ‘maTable.xhr.php?uneId=1234’, ‘monID’ ); et dans ta page maTable.xhr.php tu peut faire :


if( isset( $_GET['monId'] ) ) {
 $sql= 'DELETE FROM .... WHERE  `id`='.intval( $_GET['monId'] ).' LIMIT 1';
 ...
}
// Mon code normal

les résultats renvoyer par le fichier serons les memes sans la ligne supprimer.

A ouaip en effet c’est vraiment super.

Plus j’apprends plus j’adore cette façon de programmer :smiley:

Bon j’ai réussi à faire ce que je voulais avec ce que tu m’as donnés maintenant jvais essayer d’apprendre tout seul comme j’ai les bases.

Merci beaucoup PyrO_70 sa fait plaisir d’avoir des gens à l’écoute ^ ^)

Jreviens pour une nouvelle question sur le sujet^^"

C’est en faite je cherche à pouvoir utiliser la fonction ajax par formulaire.

J’ai donc modifié un peu le script pour qu’il puisse prendre en compte si on veut du post ou du get donc voici le résultat :

function aJax( pageToLoad , elementId , type) {
	var xmlhttp;

	if ( typeof XMLHttpRequest != 'undefined' ) {
		try {
			xmlhttp = new XMLHttpRequest();
		} catch(e) {
			xmlhttp = false;
		}
	} else {
		try {
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
				xmlhttp = false;
			}
		}
	}

	function loadFragmentInToElement(fragment_url, element_id, type) {
		var element = document.getElementById(element_id);
		element.innerHTML = '<?php echo $Chargement; ?>';
		if(type == "POST")
		{
			xmlhttp.open("POST", fragment_url);
		}else{
			xmlhttp.open("GET", fragment_url);
		}
		xmlhttp.onreadystatechange = function() 
		{
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
			{
				element.innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.send(null);
	}
	loadFragmentInToElement( pageToLoad, elementId, type );
}

J’ai testé le paramètre type passe bien mais c’est comme s’il n’allait pas jusqu’à la page.
J’ai vérifier l’adresse elle est pourtant bonne donc jme demande si c’est pas mon xmlhttp.open(“POST”, fragment_url); qui n’est pas bon.

Merci d’avance :wink:

il faut send les variable sous la forme (string) ?var1=…&var2=… dans les send(); sur l’obj de type XMLHttpRequest.

Même pour les POST il faut les traiter comme des GET ?

Mais à smoment la sa sert à rien de mettre un xmlhttp.open(“POST”, fragment_url); si c’est le cas nan ?

Faut voir, j’ai pas étudier la question :stuck_out_tongue:

En POST soit tu fais du “application/x-www-form-urlencoded” (et tu fais tes “var1=xxx&var2=yyy&…”) ou du “multipart/form-data” (c.f. la doc du w3.org)

Ah oui c’est juste j’ai oublié de dire ca :smiley:

Mince sa veut pas marcher -_-
J’ai peut être mal compris quelque chose mais sinon voici les fichiers :

Javascript :

function aJax( pageToLoad , elementId , type) {
	var xmlhttp;

	if ( typeof XMLHttpRequest != 'undefined' ) {
		try {
			xmlhttp = new XMLHttpRequest();
		} catch(e) {
			xmlhttp = false;
		}
	} else {
		try {
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
				xmlhttp = false;
			}
		}
	}

	function loadFragmentInToElement(fragment_url, element_id, type) {
		var element = document.getElementById(element_id);
		element.innerHTML = '<?php echo $Chargement; ?>';
		if(type == "POST")
		{
			xmlhttp.open("POST", fragment_url);
			http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
		}else{
			xmlhttp.open("GET", fragment_url);
		}
		xmlhttp.onreadystatechange = function() 
		{
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
			{
				element.innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.send(null);
	}
	loadFragmentInToElement( pageToLoad, elementId, type );
}

HTML formulaire en partie :

echo '<form method="post" onsubmit="aJax(\'edit_object.php?statut=document.getElementById(\'statut\').value&nom=document.getElementById(\'nom\').value&content=document.getElementById(\'content\').value\',\'corpPage\', \'POST\')">';

PHP :

	$nom 		= $_POST["nom"];
		$content 	= $_POST["content"];

Ce qu’il me fait est plutôt étrange, il me redirige vers une autre page du site et non vers la page edit_object.php
J’ai pas réussi à trouver le problème perso -_-

j’ai regardé si sa venait de la page edit_object mais nan car quand je met juste un echo dedans il me renvoie toujours vers une autre page.
Jpense que sa vient de mon html qui est mal syntaxer mais j’ai pas réussi à lfaire marcher même en lmodifiant sous diverses façon.
Edité le 01/06/2008 à 11:46