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;

Utilisation de l'objet xmlhttprequest

NodeJS

Vue hybride

Discussions similaires

Partager

Partager