Discussion :

[Angy987]

Bonjour,

J'ai dû utiliser de l'Ajax dans mon application mais voila, je n'ai jamais suivi de cours/formation pour utiliser Ajax, donc j'ai fait ce que je devais faire mais à ma façon sans savoir si c'est une bonne méthodologie ou pas.

Je vais expliquer vite fait ce que je devais faire:
Imagineons que vous avez une personne qui possède plusieurs adresses et vous pouvez créer/ajouter des adresses sur une interface grâce à un bouton "+" (en s'affichant vide sur l'interface, sans aucune sauvegarde en db) ou bien les supprimer (bouton "x").
Bien évidemment, je dois utiliser Ajax afin de ne pas devoir recharger la page et pour que les champs s'affichent directement sur la page.

Pour se faire, sur mon bouton "+" par exemple, je fais appel à une fonction javascript (disons "appelAjax()").

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<a href="" onclick="addAjax()">
<img src="style/images/add.png" />
</a>
 
function appelAjax(form, action){
var action +=  "monaction.action";
req = new XMLHttpRequest();
req.onreadystatechange = processStateChange;
req.open("POST", action, true);
req.send(null);
req.close();
}
 
function processStateChange(){	
var d = document.getElementById("resultat");
d.innerHTML = req.responseText;
}

A partir de là, mon action qui implémente ServletRequestAware,ServletResponseAware va être appelée, je vais utiliser le PrintWriter, etc..

Mon problème de méthodologie apparaît lorsque par exemple, imagineons:

Interface:
------Nom------Adresse------Localite------Code Postal------
-------A--------AAA----------Bruxelles------1000------------X (Supprimer)
------------------------------------------------------------+ (Ajouter)

Si je clique sur "+", une nouvelle ligne vide va apparaitre, je la remplis et ensuite lorsque je vais recliquer sur "+" (SANS avoir sauvé), une nouvelle ligne va apparaître mais la 1ère ligne ajoutée (donc celle que j'ai rempli juste avant) va redevenir vide vu qu'aucune donnée n'a été sauvée.
Maintenant, ce que je peux faire, c'est un genre de tableau dans ma fonction javascript avec tous les champs: exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
var nom = new Array();
var nomLength = document.forms[0].nom.length;
for(var i=0; i<nomLength;i++){
nom[i]  = document.forms[0].nom[i].value;
}

(C'est dans le cas où il y a plusieurs champs pcq forcément, s'il n'y a qu'un champ, length va renvoyer une autre valeur du style null)

Et les passer en paramètre à mon url ("action.action?nom=" + nom) et le tableau "nom" sera récupérer dans mon action dans un "String[] nom;". Forcément, après je devrai remplir ma liste avec les champs dans une boucle à chaque fois.

Je précise qu'à partir du moment où j'utilise Ajax, ma liste est mise en session et à chaque "ajout/suppression" la liste mise à jour est remise en session pour pouvoir l'utiliser comme bon me semble.

C'est ici que j'ai besoin de vous pour me dire ce qui ne va pas (enfin.. ça fonctionne mais bon), ce que j'ai à améliorer, me dire si je me suis complètement trompé de façon de faire, etc...

Un grand merci d'avance!

[andry.aime]

Bonjour,
1-Les codes javascript doivent être entre les balise

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<script type="text/javascript">
//ton code ici
</script>

2- req est une variable local dans la fonction appelAjax, donc tu n'as pas accès à cette variable dans la fonction processStateChange.
3- pour la method post, tu dois ajouter le le header

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

4-

Et les passer en paramètre à mon url ("action.action?nom=" + nom)

Dans ce cas tu dois utiliser la method GET mais pas POST
Bref, je te conseille de lire un tutoriel AJAX.

A+.

[maxf1]

Perso pour ma part j'essaye toujours d'externaliser les javascripts dans une page à part ou dans un fichier (.js) à part.

Ensuite l'ajax pur reste assez brouillon d'où certain Framework Ajax (prototype, dojo, jquery, ect...