BTS IG Informatique de Gestion

Webmaster Sexe: Messages: 5584 Localisation: Montpellier

Hello,

Pour une fois c'est moi qui vais faire une demande.
Pour un projet de site (et éventuellement une petite évolution dans le forum), je vais avoir besoin de coder un petit truc en AJAX. Est-ce que certains ont déjà eu à coder en AJAX et si oui, si vous avez des url sympatiques à faire tourner pour apprendre l'AJAX en tant que débutant, ca m'interresse.

En gros, c'est pour coder un système de recherche qui à partir d'un champ saisi dans un formulaire va rechercher les correspondances dans la base de données, et donc les afficher.

Accro à Web-IG Sexe: Messages: 118

Vincent a écrit:

Hello,

Pour une fois c'est moi qui vais faire une demande.
Pour un projet de site (et éventuellement une petite évolution dans le forum), je vais avoir besoin de coder un petit truc en AJAX. Est-ce que certains ont déjà eu à coder en AJAX et si oui, si vous avez des url sympatiques à faire tourner pour apprendre l'AJAX en tant que débutant, ca m'interresse.

En gros, c'est pour coder un système de recherche qui à partir d'un champ saisi dans un formulaire va rechercher les correspondances dans la base de données, et donc les afficher.

Je vais surement dire une counerie mais une simple requete SQL ne suffirait elle pas?

Webmaster Sexe: Messages: 5584 Localisation: Montpellier

Faf a écrit:

Je vais surement dire une counerie mais une simple requete SQL ne suffirait elle pas?

Ca n'est pas une connerie.
Mais quand tu vois qu'en AJAX tu peux faire ca sans raffraichir ta page, ca prend tout son intérêt. Dans le cas du forum, dès lors que tu saisis le titre d'un nouveau post, ca te proposerai immédiatement une liste de sujets qui sont complémentaires, et peut-être éviteraient de créer un post en doublon.

Niveau interractivité on y gagne.

Si tu connais Gmail (le webmail de Google), et bien c'est codé en AJAX et quand tu vois à quel point ca devient rapide, du fais que tu ne recharge pas ta page à chaque fois.
Pour faire un webmessenger, un chat, c'est vraiment le pied.

Accro à Web-IG Sexe: Messages: 118

Vincent a écrit:

Faf a écrit:

Je vais surement dire une counerie mais une simple requete SQL ne suffirait elle pas?

Ca n'est pas une connerie.
Mais quand tu vois qu'en AJAX tu peux faire ca sans raffraichir ta page, ca prend tout son intérêt. Dans le cas du forum, dès lors que tu saisis le titre d'un nouveau post, ca te proposerai immédiatement une liste de sujets qui sont complémentaires, et peut-être éviteraient de créer un post en doublon.

Niveau interractivité on y gagne.

Si tu connais Gmail (le webmail de Google), et bien c'est codé en AJAX et quand tu vois à quel point ca devient rapide, du fais que tu ne recharge pas ta page à chaque fois.
Pour faire un webmessenger, un chat, c'est vraiment le pied.

pas mal! je vais me renseigner

Posté le: Mer 08 Mar 2006 - 18:45

L'ajax c'est vraiment bien mais c'est pas facil de trouver de la doc dessus Sad

Je suis allé sur le de blog de emob.

Un exemple pas mal ici

J'ai eu les liens suivants
http://developer.mozilla.org/fr/docs/AJAX

http://www.excargot.net/

http://openweb.eu.org/articles/objet_xmlhttprequest/

Je suppose que tu sais deja que l'ajax est un ensemble de technologies plutot anciennes d'ailleur... d'ou le javascript et tout ca...
J'ai aussi du mal à trouver de vrai tutos dessus Sad

Voila... bon courage si je trouve d autres choses je te dis ca... et si tu trouve dis le moi aussi se serait sympa parce que je cherche partout là Sad

EDIT : La photo c'est pour rire un peu dans ce monde de brutes Smile

Accro à Web-IG Sexe: Messages: 162 Localisation: 95100

c'est utilisé depuis un moment par codes-sources
des exemples ici

Webmaster Sexe: Messages: 5584 Localisation: Montpellier

Je vais m'autorépondre :

http://fr.wikipedia.org/wiki/AJAX
http://www.framasoft.net/article3991.html
http://www.adaptivepath.com/publications/essays/archives/000385.php
http://openrico.org/rico/home.page
http://www.sitepoint.com/article/remote-scripting-ajax
http://www.ajaxpatterns.org
http://najax.sourceforge.net

Newbiiiie Sexe: Messages: 9

c'est pas telllement vrai l'ajax n'est pas plus rapide, car il est asynchrone donc c'est juste que lorsque l'on clique on attend le callback donc tout se fait du coté client (soit disant le web 2.0, le client riche) , par contre son avantage est indéniable c'est l'affichage spécifique d'une zone sans avoir a recharger la page. Mon premier test a été celui pour mon site qui lis un flux xml : http://www.lowan-project.com

Après le bts je me met a un composant fonctionnant dans le même genre d'idée que google suggest. Mais bon il existe 30000 codes sources qui détaillent tout, je préfere le faire moi même ^^

Forumeur fréquent Sexe: Messages: 54

Moi j'en est presque fait j'ai fait du javascript et du Dom.
Si tu veut je peut t'aider.

C'est ultra simple l'ajax. D'ailleurs j'en ai dans une PTI Smile

Je vous explique le concept :
En fait tout repose sur l'objet XMLHTTPRequest. Donc dans le javascript, on commence par poser cette fonction de création du dit objet :

Code:

On peut maintenant faire une requete ajax :

Code:

var xhr_object = getXMLHTTP();

Cet objet possède les méthodes suivantes : open, send, onreadystatechange qui nous permettent de passer des requetes.

Pour le système de recherche que propose Vincent, nous aurions ça :

Coté HTML :

Code:

[input type="text" onkeypress="chercher(this.value);" /]
[p id="resultat"][/p] (remplacer [] par <>)

Coté Javasccript :

Code:

[...la fonction de création d'objet xmlhttp...]

function chercher(str) {
var xhr_object = getXMLHTTP();
xhr_object.open("GET", "recherche.php?recherche="+str, true);
/* méthode .open() "get" signifie la méthode d'envoie des données ('get' ou 'post', "recherche.php" est l'url du fichier qu'on va chercher. true... hm, je ne sais plus à quoi ça sert ça :p */

xhr_object.send(null); // on envoie la requete

/*ensuite, il faut lui indiquer quoi faire quand la réponse arrive : */
xhr_object.onreadystatechange = function() {insere(xhr_object);};
}

// C'est la fonction qui est appelée à chaque changement d'état (onReadyStateChange)
function insere(xhr_object) {
if(xhr_object.readyState == 4) // readystate est un code signifiant l'état de la requete. 4 signifie qu'elle s'est achevée avec succès.
{
document.getElementById('resultat').innerHTML = xhr_object.responseText;
/* .responseText est le contenu qui est renvoyé. On le place dans ce cas là dans l'élément p d'id 'resultat'
*/
}
}

Pour terminer, il faut écrire le script php qu'appelle l'objet xmlhttprequest :

Code:

[?
/* Script tout con qui prends $_GET['recherche'] en argument et qui fait un echo des résultats retournés par la requete SQL
*/
//Exemple :
echo 'kikoo :D';
?]

Voilà, c'est tout Smile

Pour un exemple en pratique, essayez ma PTI : leChatMachine, un chat en ajax : http://www.hadrien.eu/#dev1
Smile

Webmaster Sexe: Messages: 5584 Localisation: Montpellier

Mmm, voila qui est bien expliqué.
Je vais étudier la chose.

Forumeur occasionnel Messages: 16

je fait pas exactement pareil.

ma methodologie est tirée de tutos de developper.com

tu as de tres bonne ressources sur ce site Smile

(comme toujours)

en gros, tu associe une fonction au "onreadystatechange"

comme ca, a chaque fois que ton XHR change d'etat, cette fonction est applée, reste a toi de verifier avec ses attributs, si la requete est terminée.

ensuite, tu peut mettre ton traitement la dedans...

de plus, AJAX === DOM

=> et ils expliquent commen netoyer le XML que tu recoit des noeuds inutils et surtout qui different selon les navigateurs Smile

Et voilà cet après midi je me suis aussi mis à l'ajax.

Le résultat se trouve sur le lien suivant (au niveau des commentaires) :
http://www.deconne.net/video-5-Les-japonaises-se-lachent.htm

On passe entre les pages et on envoie un commentaire sans tout réactualiser.
C'est toujours mieux que la vieille frame d'avant. Smile

Très bien

Ça ressemble à mon chatMachine :p

jaime bien ton site Very Happy

kwal a écrit:

jaime bien ton site Very Happy

Moi aussi je l'aime bien Very Happy

Hadrien.eu a écrit:

Très bien

Ça ressemble à mon chatMachine :p

Ouai c'est exactement le même truc (j'ai pas piqué tes sources hein ^^).

Mon prochain travail en ajax sera une éditeur de news WYSIWYG.
Mais je sais pas encore trop comment je vais gérer ça.

Genzo a écrit:

kwal a écrit:

jaime bien ton site Very Happy

Moi aussi je l'aime bien Very Happy

Hadrien.eu a écrit:

Très bien

Ça ressemble à mon chatMachine :p

Ouai c'est exactement le même truc (j'ai pas piqué tes sources hein ^^).

Mon prochain travail en ajax sera une éditeur de news WYSIWYG.
Mais je sais pas encore trop comment je vais gérer ça.

Tu peux éventuellement t'inspirer de mon WikiCom, éditeur de mail html en wysiwyg. Et jettes un oeil à ma lib javascript sur laquelle je travailles :
http://www.hadrien.name/Works/anvJSLib/
sous licence CC.
Si tu veux bosser dessus avec moi, j'ai besoin de quelqu'un pour me rendre tout ça compatible avec IE. J'en ai ras le cul de perdre mon temps pour IE alors je laisse cette tache aux autres :p

Webmaster Sexe: Messages: 5584 Localisation: Montpellier

Pour rester toujours à mon projet en cours, n'y connaissant pas encore grand chose, tâtonnant entre quelques tutoriels, je cherche un exemple de site ou de script à adapter qui me permette à partir d'une liste d'éléments, de changer leur position.

Concrètement vous avez une liste de 10 personnes sur une page, et vous voulez les classer dans un autre ordre. A chaque changement de position, on enregistre les nouvelles.

Si vous avez ca, ca m'interresse Very Happy

Vincent a écrit:

Concrètement vous avez une liste de 10 personnes sur une page, et vous voulez les classer dans un autre ordre. A chaque changement de position, on enregistre les nouvelles.

Si vous avez ca, ca m'interresse Very Happy

http://neb.net/playground/dragdrop/ ? Wink

A perfectionner, car tu peux perdre un bloc si tu le lache mal.

Webmaster Sexe: Messages: 5584 Localisation: Montpellier

Genzo a écrit:

http://neb.net/playground/dragdrop/ ? Wink

A perfectionner, car tu peux perdre un bloc si tu le lache mal.

T'es un amour toi.
C'est exactement ce qu'il me faut.
Faut juste que je trouve comment faire pour déterminer la position de chacun des éléments (ca marche avec des <li> </li> donc je sais pas trop comment récupérer les index), et qu'à chaque déplacement, je fasse les bonnes requêtes en base pour mémoriser la nouvelle position.