Utilisation de l'objet xmlhttprequest

Version imprimable

Bonjour à tous,

J'ai crée un serveur node.js avec son routeur et son gestionnaire de requête, tout fonctionne normalement. Je souhaiterai mainTenant gérer mes requêtes grace a Ajax. Mais lorsque que j'exécute des codes très simple de création de l'objet xmlhttprequest, cela ne fonctionne pas du tout. J'ai utilisé des codes basiques et mon oXHR.js n'est pas détecter car dans ma page web lorsque je fais "inspecter l'elément", ce fichier n'est pas trouvé, j'ai donc mis tout ce code dans un <script> de ma page html. Mais cela ne fonctionne toujours pas. Je ne comprend absolument pas pourquoi cela ne marche pas alors que j'ai suivi toutes les étapes. Peut-être faudrait-il le gérer dans le gestionnaire de requête et crée une autre fonction, j'ai tenté de le faire mais cela n'a pas fonctionné non plus. De plus dns "inspecter l'élement", on me dit qu'il est impossible d'acceder à l'url localhost\XMLHttpRequest_getXML.xml , alors que c'est mon fichier xml et le principe d'ajax est de recharger la page actuelle donc l'url ne devrait pas être changé! SVP aidez-moi !!!!! Voici les codes:
Code:

1 2 3 4 5 6 7 8 9 <?xml version="1.0" encoding="utf-8"?>  <root> <soft name="Adobe Dreamweaver" /> <soft name="Microsoft Expression Web" /> <soft name="Notepad++" /> <soft name="gedit" /> <soft name="Emacs" /> </root>
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 34 35 36 37 38 39 40 41 42 43 44 45 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Techniques AJAX - XMLHttpRequest</title> <script type="text/javascript" src="oXHR.js"></script> <script type="text/javascript">  </script> </head> <body> <p> <button onclick="request(readData);">Afficher le fichier XML</button> <div id="output"></div> </p> </body> </html>

29/06/2014, 19h56
kaari kosaku

Salut,
On pourrait avoir le code de ton serveur Node ?

Code du serveur

Voici mon code du serveur, tout d'abord le server.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var http = require("http");
var url = require("url");
 
function start(route, handle) {
  function onRequest(request, response) {
    var pathname = url.parse(request.url).pathname;
    console.log("Requête reçue pour le chemin " + pathname + ".");
    route(handle, pathname, response, request);
  }
 
  http.createServer(onRequest).listen(8080);
  console.log("Démarrage du serveur.");
}
 
exports.start = start;

ensuite celui de router.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function route(handle, pathname, response, request) {
  console.log("Début du traitement de l'URL " + pathname + ".");
  if (typeof handle[pathname] === 'function') {
    handle[pathname](response, request);
  } else {
    console.log("Aucun gestionnaire associé à " + pathname);
    response.writeHead(404, {"Content-Type": "text/html"});
    response.write("404 Non trouvé");
    response.end();
  }
}
 
exports.route = route;

celui de requestHandlers.js :

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
var querystring = require("querystring"),
    fs = require("fs"),
    formidable = require("formidable");
 
function start(response,request) {
  console.log("Le gestionnaire 'start' est appelé.");
   fs.readFile('page.html', 'utf-8', function(error, content) {
        response.writeHead(200, {'Content-Type' : 'text/html'});
                response.end(content);
				});
 
}
 
function accesSession(response, request) {
  console.log("Le gestionnaire 'accesSession' est appelé.");
 
  fs.readFile('pagetwo.html', 'utf-8', function(error, content) {
        response.writeHead(200, {'Content-Type' : 'text/html'});
                response.end(content);
				});
}
 
exports.start = start;
exports.accesSession = accesSession;

et enfin le index.js :

Code:

1
2
3
4
5
6
7
8
var server = require("./server");
var router = require("./router");
var requestHandlers = require("./requestHandlers");
var handle = {};
 
handle["/"] = requestHandlers.start;	//Collection de gestionnaire de requetes
handle["/accesSession"] = requestHandlers.accesSession;
server.start(router.route,handle); // on passe l'objet router a notre serveur et le serveur peut appeler la methode route de l'objet router

Mmmmh, je trouve ton routage pour le moins curieux... Avec ton handle et tout... mais soit, chacun son truc :mouarf:.

Si je devais accéder à des fichiers xml j'irai chercher une route du style :

/xmlFiles?fileName='XMLHttpRequest_getXML.xml'

Si on veut garder ta syntaxe il faudrait changer quelques petites choses pour améliorer ton programme.
Si tu permet :

server.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
var http = require("http");
var url = require("url");
 
function start(route, handle) {
  function onRequest(request, response) {
    var calledUrl = url.parse(request.url)  //on va directement se servir de cet objet qui regroupe toutes les propriétés de l'url
    console.log("Requête reçue pour le chemin " + calledUrl.pathname + ".");
    route(handle, calledUrl, response, request);
  }
 
  http.createServer(onRequest).listen(8080);
  console.log("Démarrage du serveur.");
}
 
exports.start = start;

Router.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function route(handle, calledUrl, response, request) {
  console.log("Début du traitement de l'URL " + calledUrlpathname + ".");
  if (typeof handle[calledUrl.pathname] === 'function') {
    handle[calledUrl.pathname](response, request, calledUrl.query);  //On ajoute la liste query qui correspond à la partie <...?filename='XMLHttpRequest_getXML.xml'>
  } else {
    console.log("Aucun gestionnaire associé à " + pathname);
    response.writeHead(404, {"Content-Type": "text/html"});
    response.write("404 Non trouvé");
    response.end();
  }
}
 
exports.route = route;

Ajouter la fonction qui se charge du routage pour accéder à ce fichier :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function accesXML(response, request, query) {
  console.log("Le gestionnaire 'accesXML' est appelé".);
 
  fs.readFile(query.fileName, 'utf-8', function(error, content) {
 
        if (error) {
            console.error(error)  //Si le fichier n'est pas trouvé
            response.writeHead(404)  //On renvoie une 404
        } else {
            response.writeHead(200, {'Content-Type' : 'text/xml, application/xml'});
        }    
        response.end(content)
	});
}

Tu pourrais aussi vérifier que l'extension du fichier est bien xml avant de le transmettre.

Enfin tu ajoute cette nouvelle route dans index.js

Code:

1
2
3
4
5
 
handle["/"] = requestHandlers.start;	//Collection de gestionnaire de requetes
handle["/accesSession"] = requestHandlers.accesSession;
handle['/xmlFiles'] = requestHandlers.accesXml
server.start(router.route,handle); // on passe l'objet router a notre serveur et le serveur peut appeler la methode route de l'objet router

Au plaisir ;)

PS : Bien entendu, l'adresse appelée depuis ton xhr va changer, dans notre cas :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
function request(calledUrl, callback) {
    var xhr = getXMLHttpRequest();
 
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
            callback(xhr.responseXML);
        }
    };
 
    xhr.open("GET", calledUrl, true);
    xhr.send(null);
}
....
....
....
<button onclick="request('/xmlFiles?fileName=XMLHttpRequest_getXML.xml', readData);">Afficher le fichier XML</button>

30/06/2014, 10h47
sabrinouch

Problème

Bonjour,
Merci beaucoup pour ton aide, malheuresement, cela ne marche toujours pas. Quand j'inspecte l'élément, on me dit que l'élement XMLHttpRequest_getXML.xml n'est pas trouvé pourtant il se trouve dans le même fichier que les autres pages du code J'ai essayé aussi de taper l'url directement, je tombe sur une page 404. Je ne vois absoluments pas l'erreur que j'ai pu faire...

Bon alors,

J'ai repris le code et je l'ai simulé sur mon système, j'ai corrigé les diverses erreurs et chez moi ça fonctionne tout comme il faut.

Si tu ne comprend pas quelque chose, n'hésite pas..

index.html

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
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Techniques AJAX - XMLHttpRequest</title>
    <script type="text/javascript" src="oXHR.js"></script>
    <script type="text/javascript">
 
        function request(calledUrl, callback) {
            var xhr = getXMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                    callback(xhr.responseXML);
                }
            };
 
            xhr.open("GET", calledUrl, true);
            xhr.send(null);
        }
 
        function readData(oData) {
            var nodes = oData.getElementsByTagName("soft");
            var ol = document.createElement("ol"), li, cn;
 
            for (var i=0, c=nodes.length; i<c; i++) {
                li = document.createElement("li");
                cn = document.createTextNode(nodes[i].getAttribute("name"));
 
                li.appendChild(cn);
                ol.appendChild(li);
            }
 
            document.getElementById("output").appendChild(ol);
        }
 
    </script>
</head>
<body>
<p>
    <button onclick="request('http://localhost:8080/xmlFiles?fileName=XMLHttpRequest_getXML.xml', readData);">Afficher le fichier XML</button>
<div id="output"></div>
</p>
</body>
</html>

index.js

Code:

1
2
3
4
5
6
7
8
9
10
 
var server = require("./serveur");
var router = require("./router");
var requestHandlers = require("./requestHandlers");
var handle = {};
 
handle["/"] = requestHandlers.start;	//Collection de gestionnaire de requetes
handle["/accesSession"] = requestHandlers.accesSession;
handle['/xmlFiles'] = requestHandlers.accesXML;
server.start(router.route,handle); // on passe l'objet router a notre serveur et le serveur peut appeler la methode route de l'objet router

requestHandler.js

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
34
35
36
37
38
39
40
41
42
43
 
var fs = require("fs");
 
function start(response, request) {
    console.log("Le gestionnaire 'start' est appelé.");
    fs.readFile('page.html', 'utf-8', function(error, content) {
        response.writeHead(200, {'Content-Type' : 'text/html'});
        response.write(content)
        response.end()
    });
 
}
 
function accesSession(response, request) {
    console.log("Le gestionnaire 'accesSession' est appelé.");
 
    fs.readFile('pagetwo.html', 'utf-8', function(error, content) {
        response.writeHead(200, {'Content-Type' : 'text/html'});
        response.write(content)
        response.end()
    });
}
 
function accesXML(response, request, query) {
    console.log("Le gestionnaire 'accesXML' est appelé.");
 
    fs.readFile(query.fileName, 'utf-8', function(error, content) {
 
        if (error) {
            console.error(error)  //Si le fichier n'est pas trouvé
            response.writeHead(404)  //On renvoie une 404
        } else {
            response.writeHead(200, {'Access-Control-Allow-Origin': '*', 'Content-Type' : 'text/xml'});
        }
        response.write(content);
        response.end()
    });
}
 
 
exports.start = start;
exports.accesSession = accesSession;
exports.accesXML = accesXML;

routeur.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function route(handle, calledUrl, response, request) {
    console.log("Début du traitement de l'URL " + calledUrl.pathname + ".");
    if (typeof handle[calledUrl.pathname] === 'function') {
        handle[calledUrl.pathname](response, request, calledUrl.query);  //On ajoute la liste query qui correspond à la partie <...?filename='XMLHttpRequest_getXML.xml'>
        console.log(response)
    } else {
        console.log("Aucun gestionnaire associé à " + calledUrl.pathname);
        response.writeHead(404, {"Content-Type": "text/html"});
        response.write("404 Non trouvé");
        response.end();
    }
}
 
exports.route = route;

serveur.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
var http = require("http");
var url = require("url");
 
function start(route, handle) {
    function onRequest(request, response) {
        var calledUrl = url.parse(request.url, true);  //on va directement se servir de cet objet qui regroupe toutes les propriétés de l'url
        console.log("Requête reçue pour le chemin " + calledUrl.pathname + ".");
        route(handle, calledUrl, response, request);
        console.log(response)
 
    }
 
    http.createServer(onRequest).listen(8080);
    console.log("Démarrage du serveur.");
}
 
exports.start = start;

sabrinouch, c'est exactement le même problème que dans ton autre discussion.

Si tu te contentes de copier / coller le code du tuto sans lire les explications qui vont avec (ou en lisant mais sans comprendre), ça ne sert à rien.
Le code est là pour illustrer et faire comprendre ce qui est dit dans l'article donc toutes les réponses à tes interrogations sont dans l'article.

En gros et pour résumer.
Ceux qui ont l'habitude d'utiliser Apache ont la fausse impression qu'un serveur sert à lire une arborescence dans l'URL pour chercher et renvoyer le contenu du fichier correspondant.
Par exemple, http://nodejs.developpez.com/tutoriels/javascript/node-js-livre-debutant/index.php (je rajoute le index.php même s'il est implicite sur Apache) renverra le fichier index.php se situant dans le répertoire /tutoriels/javascript/node-js-livre-debutant/. C'est le comportement par défaut d'Apache, mais ce n'est pas vrai pour tous les serveurs, notamment pour Node.js.
Node.js se base sur le fait que ce qui se trouve après le nom de domaine dans l'URL constitue ce que l'on appelle la chaine de requête, rien de plus et en particulier, pas une arborescence !
C'est donc à toi, en fonction de cette chaine de requête, d'indiquer au serveur quelle ressource il devra renvoyer. Tant que tu n'auras pas prévu un cas spécifique, ce cas spécifique renverra soit une erreur 404 si ton code est cohérent, soit rien du tout.

Dans le code que tu montres, c'est le rôle du router de déterminer quel contenu correspond à quelle requête et bien entendu, rien ne t'empêche de créer un système qui calquera le contenu renvoyer sur l'arborescence, mais dans ce cas, il faut le coder.

EDIT
Pour mieux comprendre ce que je t'explique, tu peux reprendre l'exemple de base du serveur :
server.js
Code:

1 2 3 4 5 6 7 var http = require("http"); http.createServer(function(request, response) { response.writeHead(200, {"Content-Type": "text/plain"}); response.write("Hello World"); response.end(); }).listen(8888);
Dans l'invite de commande Windows, tu lances

Code:

node server.js

Si tu ouvres ton navigateur à l'adresse http://localhost:8888, tu verras le joli message apparaitre
Hello World
Essaye maintenant d'aller à l'adresse http://localhost:8888/foo/bar/toto.php et tu auras toujours
Hello World
parce que dans ton code, ton serveur renvoie la chaine "Hello World" dans tous les cas, donc quelle que soit la chaine de requête.

03/07/2014, 12h03
sabrinouch

Merci Bovino. kaari kosaku, j'ai testé ton code, il y avait une erreur de frappe sur "server" donc si tu l'a testé et qu'il a marché comme ça, pourquoi pas ? Après avoir corrigé cela, ça ne fonctionne toujours pas, rien ne s'affiche. Pourtant, ayant le même serveur, si ça marche pour toi ça devrait marcher pour moi. Il y a plusieurs choses que je ne comprends pas. Tout d'abord, le query.filename comment va-t-il savoir de quel fichier parle -t-on alors qu'on ne lui spécifie jamais, à part dans :

Code:

<button onclick="request('http://localhost:8080/xmlFiles?fileName=XMLHttpRequest_getXML.xml', readData);">

Mais apparemment il ne comprend pas. A la place, j'ai donc essayé de mettre la page "index.html". Lorsque que j’exécute, j'ai l'erreur suivante :

Citation:

error on line 11 at column 42: xmlParseEntityRef: no name

J'ai vu que cette erreur apparaît lorsque le caractère "&" n'est pas supporté. Dans mon code, il n'y en a aucun. J'ai aussi trouvé dans un forum qu'il fallait désactiver les plug-in, ce que j'ai fait mais cela n'a rien changé. De plus, lorsque je fais "inspecter l’élément", je n'ai rien sur la page http://localhost:8080/xmlFiles.
03/07/2014, 12h33
Bartox

Dans :

Code:

<button onclick="request('http://localhost:8080/xmlFiles?fileName=XMLHttpRequest_getXML.xml', readData);">

Essaye de remplacer localhost par : http://127.0.0.1:1337 (1337 ou tout autre port utilise à la creation de ton serveur node)

J`ai dejà eu des conflits du style. N`oublie pas que le port 8080 est par exemple utilisè par Skype.
03/07/2014, 12h51
sabrinouch

1 pièce(s) jointe(s)

Bartox, je viens d'essayé, malheuresement le problème ne vient pas de là, ma page ne s'affiche tourjours pas. Par contre, si cela peut vous aider j'ai l'erreur suivante sur ma console:
Pièce jointe 150285
03/07/2014, 12h59
Bartox

Tous tes fichiers sont à la racine de ton projet ? C`est quoi ton arborescence ?
03/07/2014, 13h17
kaari kosaku

1 pièce(s) jointe(s)

Citation:

Merci Bovino. kaari kosaku, j'ai testé ton code, il y avait une erreur de frappe sur "server" donc si tu l'a testé et qu'il a marché comme ça, pourquoi pas? Après avoir corrigé cela, ça ne fonctionne toujours pas,rien ne s'affiche, pourtant ayant le même serveur si ça marche pour toi ça devrait marcher pour moi.

Et pourtant...
Pièce jointe 150287

Citation:

Il y a plusieurs choses que je ne comprends pas, tout d'abord, le "query.filename" comment va-t-il savoir de quel fichier parle -t-on alors qu'on ne lui spécifie jamais, à part dans <button onclick="request('http://localhost:8080/xmlFiles?fileName=XMLHttpRequest_getXML.xml', readData);">, mais apparement il ne comprend pas?

url.query -> doc node.js
Pour faire simple query renvoi un objet : {attribut1: 'valeur1', attribut2: 'valeur2'}
Accordement avec l'Url qu'on a été entrée, on a donc : {fileName: 'XMLHttpRequest_getXML.xml'}
Si on veut récupérer '********.xml', on fait donc un query.fileName, ou un query['fileName']

Citation:

A la place, j'ai donc essayé de mettre la page "index.html" lorsque que j’exécute, j'ai l'erreur suivante : error on line 11 at column 42: xmlParseEntityRef: no name, j'ai vu que cette erreur apparaît lorque le caractère " &" n'est pas supporté, dans mon code il n'y en a aucun, j'ai aussi trouvé dans un forum qu'il fallait désactiver les plug-in, ce que j'ai fais mais cela n'a rien changé.

A la place de quoi tu as essayé de mettre 'index.html' où ? 8O

Citation:

De plus, lorsque je fais "inspecter l'element", je n'ai rien sur la page http://localhost:8080/xmlFiles.

Bovino a eu la patience et l'amabilité de tout t'expliquer à ce propos.

Lance ton serveur sur le port XXXX, lance ton navigateur et rends-toi à l'adresse http://localhost:XXXX/xmlFiles?fileN...est_getXML.xml et copie ce que log ton serveur dans la console ici.

PS : je ne sais pas si j'ai besoin mais je précise tout de même que XXXX s'agit du port que tu as choisis...
03/07/2014, 14h18
sabrinouch

1 pièce(s) jointe(s)

Pièce jointe 150298

Merciiiiiii kaari kosaku <3