[AJAX] AJAX traiter la réponse du serveur
bonjour,
bon voilà je début sur AJAX ( l'objet xmlHTTPrequest plus précisement )
voilà ce que j'aimerais faire :
lorsque je click sur un bouton, une requete asynchrone est envoyée au serveur,
le serveur retourne une reponse ( du code html donc ) et j'aimerais pouvoir récupérer des valeurs en javascript comme si la page était afficher ( c'est à dire : reponseDuServeur.getElementById('unId').value )
alors voilà mon code javascript :
-premiere fonction ( elle envoie la requete au serveur )
Code:
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
|
function requete(callback,url_)
{
var xhr = getXMLHttpRequest(); // on récupere une instance de xmlHTTPrequest
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
{
callback(xhr.responseText); // appelle la fonction readData
}else console.log(xhr.readyState);
};
xhr.open("POST", url_, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send();
}
function readData(data_)
{
var node= data_.getElementById('loginbox');
alert(node.value);
} |
Donc comme vous vous en doutez, si je post c'est que ca marche pas..
firebug renvoi :
data_.getElementById is not a function
[Break on this error] var node= data_.getElementById('loginbox');
donc je me suis dis bon réflechissons : et je me suis dis que c'était normal car data_ était en fait un String et donc ca ne pouvais pas marcher, donc je me suis dis : il faut que je passe par xhr.responseXML,
sauf qu'en faisant ça, l'objet xhr.responseXML est égal a null donc ca ne marche pas ...
j'ai enfin eu une dernière idée, utiliser xhr.responseText et un ParserDOM qui analyse la chaine de caractere retourné par le serveur et la parse en HTML et place le resultat dans un objet, puis j'envoie ce fameux objet dans la fonction readData...
donc voilà le code modifier :
Code:
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
|
function requete(callback,url_)
{
var parserXML = new DOMParser();
var xhr = getXMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
{
var xmlresponse = parserXML.parseFromString(xhr.responseText, "text/xml");
callback(xmlresponse);
}else console.log(xhr.readyState);
};
xhr.open("POST", url_, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send();
}
function readData(data_)
{
console.log('dedan');
console.log(data_);
var node= data_.getElementById('loginbox');
console.log('test');
alert(node.value);
} |
donc du coup dans firebug ( et oui sa ne marche toujours pas ^^ ) il m'affiche :
dedan
Document
test
node is null
[Break on this error] console.log(node.value);
et donc Document, qui correspond à la ligne ( console.log(data_); ) , et donc à l'affichage du résultat du Parser, indique lorsqu'on click dessus qu'il y a eu certaine erreur lors du "parssage" ...
donc voilà je suis bloqué et je sais pas comment pouvoir manipuler la réponse du serveur pour arriver a mon objectif :
pouvoir récupérer des valeurs en javascript comme si la page était afficher ( c'est à dire : reponseDuServeur.getElementById('unId').value )
Merci de m'éclairer sur la facon de procéder, je précise que je suis débutant avec AJAX :p
