Utilisation de l'objet xmlhttprequest

**sabrinouch** · 27/06/2014, 15h57

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 xml :

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

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<!-- XMLHttpRequest_getXML.xml -->
<root>
    <soft name="Adobe Dreamweaver" />
    <soft name="Microsoft Expression Web" />
    <soft name="Notepad++" />
    <soft name="gedit" />
    <soft name="Emacs" />
</root>

Code html :

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
<!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(callback) {
    var xhr = getXMLHttpRequest();
   
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
            callback(xhr.responseXML);
        }
    };
   
    xhr.open("GET", "XMLHttpRequest_getXML.xml", 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(readData);">Afficher le fichier XML</button>
    <div id="output"></div>
</p>
</body>
</html>

**kaari kosaku** · 29/06/2014, 19h56

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

**sabrinouch** · 29/06/2014, 20h45

Voici mon code du serveur, tout d'abord le server.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
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 :

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

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 :

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
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 :

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

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

**kaari kosaku** · 29/06/2014, 22h01

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

.

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 :

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
 
 
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 :

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

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 :

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

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 :

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

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 :

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
 
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>

**sabrinouch** · 30/06/2014, 10h47

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...

**kaari kosaku** · 02/07/2014, 20h39

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 :

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
<!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 :

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

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 :

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
 
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 :

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

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 :

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
 
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;

**Bovino** · 03/07/2014, 08h23

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 :

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

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 :

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

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.

**sabrinouch** · 03/07/2014, 12h03

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 html :

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

<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 :

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.

**Bartox** · 03/07/2014, 12h33

Dans :

Code :

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

 <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.

**sabrinouch** · 03/07/2014, 12h51

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:
Nom : Capture.PNG
Affichages : 924
Taille : 12,8 Ko

Nom : Capture.PNG
Affichages : 924
Taille : 12,8 Ko

**Bartox** · 03/07/2014, 12h59

Tous tes fichiers sont à la racine de ton projet ? C`est quoi ton arborescence ?

**kaari kosaku** · 03/07/2014, 13h17

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...
Nom : proof.png
Affichages : 913
Taille : 97,2 Ko

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']

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ù ?

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...

**sabrinouch** · 03/07/2014, 14h18

Nom : Capture2.PNG
Affichages : 894
Taille : 10,9 Ko

Merciiiiiii kaari kosaku <3

Utilisation de l'objet xmlhttprequest

NodeJS

Discussions similaires

Partager

Partager