[AJAX] Fonctionnement Ajax

**redspiegel** · 30/05/2008, 16h50

lut,
Je suis déjà venu poster il y a quelques jours, pour un petit problème résolu.
Depuis j'ai lu quelques trucs sur le sujet. Le problème réside toujours dans la compréhension du mécanisme....
Voila, donc je ne sais pas si c'est bon mais pour moi l'Ajax se compose ainsi :
-3 pages (1.html,1.php et 1.js).
Le fonctionnement de ce système doit être, selon moi, celui ci:
1-L'utilisateur entre ses données dans la page .html.
2-Avec l'évènement validant le .html, la page .js est interrogée.
3-La page .js récupère les informations de la page .html.(getElement...)
4-La page .php définie pour le traitement des données de la page .html est "ouverte" par la page .js (fonction open de "l'objet" XMLHttpRequest)
5-La page .php envoi les informations a la page .js (fonction send de "l'objet" XMLHttpRequest).
6-La page .php fait le traitement des infos reçues par la page .js et renvoi ces informations a la page .js qui les affiches grace a la fonction responseText.
Dites moi si mon raisonnement est bon, s'il vous plait.
Je rajouterais une question (qui concerne le code a proprement parlé)...
Lorsque je rempli un champs de formulaire et que je fais traité celui par ma page.php, le résultat est tel qu'il doit être (ça correspond au traitement .php, ex echo $nom).
Lorsque je rajoute un champs dans mon formulaire, que je le traite par ma fonction .php, je ne reçois rien, aucune mise en forme... seulement le texte émis par ma fonction "send" de ma page .js....
Ex
1 élément en input ->>> sortie : votre nom est ...
2 éléments en input ->>> sortie : votre nom est ....p=....
J'aimerais donc savoir comment cela peut être, comment retrouver pour les deux champs la mise en forme issue du traitement de ma page .php
Merci pour votre temps

**ptitboiss** · 30/05/2008, 23h51

Alors, je ne suis pas un expert en AJAX, mais il s'agit bien du raisonnement global. Le principe générale d'AJAX si tu préfères. Il existe très probablement un certains nombres de façon d'utiliser AJAX, mais ta façon de voir les chose est correct. (En tout cas je la partage...)

Pour ton problème, je ne suis pas sur d'avoir tout compris...

Je pense que d'autre pourront t'expliquer, mais sinon, ré explique ...

A bientot

**redspiegel** · 02/06/2008, 08h28

ok, alors si le fonctionnement est bon je vais pouvoir continuer sur cette voix.
Mon problème est simple (et c'est dans la continuation d'un autre sujet).
J'ai un formulaire avec deux champs (sachant que 2 ou 10 cela doit être pareil), 2 inputs que l'utilisateur doit remplir, le but étant d'interagir avec une BDD. Lorsque l'utilisateur remplit ces champs, le traitement de ces 2 champs ne se fait pas. La page .php ne traite que le premier champs passé et ignore le second.
Si je réduis ce formulaire a un champs, l'information est bien traitée.
La réside le problème, comment faire pour récupérer toutes les informations rentrées par l'utilisateur...
Un peu de code:
le.html

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
19
20
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test </title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<p>
	<div id="mess">Test Formulaire</div>
	<form  method ="post" action = "" id="form" onsubmit="test();return false;">
	Nom Utilisateur : <input type="text" name="nom_user" id="nom" /><br/>
	PreNom Utilisateur : <input type="text" name="prenom_user" id="prenom" /><br/>
	<input type="submit" id="sub" name="sub_form" value='Go'/>
	</form>
	<div id="vu"></div>
</p>
 
</body>
</html>

le.js

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
function test()
{
alert('debut test');
var xmlhttp;
var objID = document.getElementById('vu');
var page = 'test.php';
	try{
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		alert("Vous utilisez IE.");
		}catch(e)
			{
				try
				{
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
					alert("Vous utilisez IE.");
				}
				catch(e)
				{
					xmlhttp = false;
				}
			}
	if(!xmlhttp && typeof XMLHttpRequest != 'undefined')
		{
			xmlhttp = new XMLHttpRequest(); 
			alert ('xmlhttp créé');	
		}
 
	xmlhttp.onreadystatechange = function ()
	{
		if(xmlhttp.readyState == 4)
		{
			if(xmlhttp.status == 200)
			{
			 alert('milieu test');
			 objID.innerHTML = xmlhttp.responseText;
			}
		}
	}
	var nom = document.getElementById('nom').value;
	var prenom = document.getElementById('prenom').value;
	xmlhttp.open('POST',page,true);
	alert('fin test');
	xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
	xmlhttp.send('nom='+nom+'p'+prenom);
}

le.php

Code :

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

1
2
3
4
5
6
7
8
9
 
<?php
$nom = $_POST['nom'];
$p = $_POST['p'];
echo 'avant traitement<br/>';
echo 'votre nom est '.$nom.'<br/>';
echo 'votre prenom est '.$p.'<br/>';
echo 'apres traitement';
?>

Voila, le traitement issu de ces pages est le suivant (resultat page .html):
avant traitement
votre nom est verovepalexandre
votre prenom est
apres traitement

Vous voyez donc que le traitement des informations ne s'effectue pas pour la deuxième donnée (le prénom).
Comment rendre fonctionnel le traitement de la page .php sur tous les champs des inputs ???
J'ai essayé de faire deux fonctions qui se ressemblent mais qui prennent un paramètre différent (la première le nom et la seconde le prénom) et qui sont appelées dans la fonction "principale" mais ça ne fonctionne pas nom plus ...

Voila vous connaissez mon probleme merci pour vos réponse.

**redspiegel** · 02/06/2008, 16h42

Alors, apres quelques essais ca continue a ne pas fonctionner, le probleme est a present le suivant:
Comment récuperer les champs inputs dans un seul variable pouvant etre traitée par mon .php ???
Est ce qu'il faut que je concatene les infos et les envois pour les traiter dans ma page .php ?
Peut etre un peu superflux, surout si je veux verifier la présence de tous les champs.
Merci pour les réponses a venir, ++

**ryan** · 03/06/2008, 08h55

Yop!

Ceci:

Code :

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

1
2
 
xmlhttp.send('nom='+nom+'p'+prenom);

devrait plutôt être cela:

Code :

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

1
2
 
xmlhttp.send('nom='+nom+'&p='+prenom);

**redspiegel** · 03/06/2008, 09h37

Lut,
Merci pour cette réponse, mais apparemment ça ne va pas non plus...
Pourrais tu m'en dire plus sur le '&', comment le traiter, est ce que je garde le $_POST['p'] ou je le remplace par autre chose (ce qui a priori ne change pas grand chose) ?
Le résultat de Firebug est assez parlant :
Onglet Console->Onglet Post :
nom Jonah
pAnthony
Donc apparement je peux penser a premiere vue que le p et Anthony sont contenus dans une variable non visible sur la page finale (peut etre apres avoir traité la chaine de caracteres il en sortira quelque chose...).
Sinon, je pensais concaténer mes champs mais la variable qui contient la concaténation n'est pas visible a l'écran. Les informations trasmises le sont bien dans firebug, mes données apparaissent dans le même onglet que cité ci dessus.
Voila, merci encore pour votre aide, je continue de chercher sur ce forum et a tenter différentes choses.

**ryan** · 03/06/2008, 12h49

Yop!

L'ampersand est sensé séparer les champs contenus dans la requête:

nom_champ1=valeur_champ1&nom_champ2=valeur_champ2

Je suis assez étonné que cela ne fonctionne pas chez toi....Essaye sans le "alert" dans le javascript, on ne sait jamais.

**redspiegel** · 04/06/2008, 08h12

Ok merci, donc apres quelques essais ca fonctionne, je te remercie
++

[AJAX] Fonctionnement Ajax

JavaScript

Discussions similaires

Partager

Partager