[AJAX] Ouverture de fichier avec la fonction open d'ajax

**sabrinouch** · 01/07/2014, 19h40

Bonjour,
je travaille sur un serveur Node.js, j'ai testé quelques applications simples avec Ajax, cela a fonctionné mais lorsque je veux lire un fichier texte par exemple,ce fichier n'est pas trouvé, pourtant il se trouve dans le même dossier que ma page html et mon serveur node.js.
Voici mon code javascript sur ma page html:

Code html :

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

1
2
3
4
5
6
<!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">

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
var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
function getXMLHttpRequest() {
	var xhr = null;
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest(); 
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
	return xhr;
}
function maRequete(){
	var xhr = getXMLHttpRequest();
	xhr.open("GET","data.txt"  + "&nocache=" + Math.random(),true);
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			document.getElementById("champ_input").innerHTML=xhr.responseText;
		}
	};
	xhr.send(null);
}

Code html :

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

1
2
3
4
5
6
7
8
9
		</script>
	</head>
	<body>
<FORM name="ajax" method="POST" action="">
  <input type="BUTTON" value="Soumettre"  onclick="maRequete()">
</FORM>
<div id="champ_input"></div>
	</body>
</html>

Merci d'avance.

**Bovino** · 02/07/2014, 08h41

Code :

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

var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;

Tu ne peux pas faire de require dans le code client...

**andry.aime** · 02/07/2014, 09h27

Bonjour,

Code :

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

xhr.open("GET","data.txt"  + "&nocache=" + Math.random(),true);

Code :

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

xhr.open("GET","./data.txt"  + "?nocache=" + Math.random(),true);

A+.

**sabrinouch** · 02/07/2014, 09h55

Bonjour,
merci de votre aide, j'ai remplacé la ligne que vous m'aviez dis par la votre, malheuresement, cela ne marche tourjours pas, j'ai essayé de faire aussi :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function maRequete(){
    var xhr = getXMLHttpRequest();
    xhr.open("GET","./data.txt"  + "?nocache=" + Math.random(),true);		
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            // document.getElementById("champ_input").innerHTML=xhr.responseText;
	    document.ajax.dyn.value="Received:"  + xhr.responseText;  
        }
    };
    xhr.send(null);
}

Code html :

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

1
2
3
4
5
6
</head>
<body>
    <FORM method="POST" name="ajax" action="accesSession">                  
        <INPUT type="BUTTON" value="Submit"  ONCLICK="maRequete()">
	<INPUT type="text" name="dyn"  value=""> 
</body>

Mais rien n'y fait....
Aidez-moi svp je ne comprend vraiment pas mon erreur!!!!

**andry.aime** · 02/07/2014, 10h03

Remplace

Code :

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

1
2
3
4
5
6
7
8
9
if(xhr.readyState == 4 && xhr.status == 200){
 
 
	   // document.getElementById("champ_input").innerHTML=xhr.responseText;
					document.ajax.dyn.value="Received:"  + xhr.responseText;  
 
 
 
					}

par

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
if(xhr.readyState == 4){
if (xhr.status == 200 || xhr.status == 0)
   {					
       document.ajax.dyn.value="Received:"  + xhr.responseText;  
    }
else
{
       alert("Erreur :" +xhr.status +"  "+xhr.statusText);
}
 
 
					}

**Bovino** · 02/07/2014, 10h06

La première chose à faire, c'est d'ouvrir sa console JavaScript (F12) et de regarder ce qu'elle dit...

**sabrinouch** · 02/07/2014, 10h21

Bovino, je regarde le javascrpit de ma page systématiquement afin de vérifier qu'il n'y a pas d'autre erreur que Failed to load resource: the server responded with a status of 404 (Not Found). Andry.aime, j'ai testé tes codes, mais cela ne fonctionne toujours pas. J'ai même essayé le chemin absolu mais c'est encore pire. Voici où j'en suis pour le moment:

Code html :

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

1
2
3
4
5
6
7
<!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">
<!--

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
//var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
 
function getXMLHttpRequest() {
	var xhr = null;
 
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest(); 
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
 
	return xhr;
 
}
 
 
function maRequete(){
 
	var xhr = getXMLHttpRequest();
xhr.open("GET","./data.txt"  + "?nocache=" + Math.random(),true);
				xhr.onreadystatechange = function(){
 
				if(xhr.readyState == 4){
if (xhr.status == 200 || xhr.status == 0)
   {					
       document.ajax.dyn.value="Received:"  + xhr.responseText;  
    }
else
{
       alert("Erreur :" +xhr.status +"  "+xhr.statusText);
}
				};
	}			
				xhr.send(null);
 
 }

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
	</script>
	</head>
	<body>
				<FORM method="POST" name="ajax" action="accesSession">                  
	<INPUT type="BUTTON" value="Submit"  ONCLICK="maRequete()">
	<INPUT type="text" name="dyn"  value=""> 
 
 
 
</FORM>
	</body>
</html>

**Bovino** · 02/07/2014, 10h32

Envoyé par sabrinouch

pas d'autre erreur que Failed to load resource: the server responded with a status of 404 (Not Found)

Et tu ne crois pas que cette information aurait pu nous être utile ?

Ton serveur n'arrive pas à trouver le fichier demandé, c'est tout...

**sabrinouch** · 02/07/2014, 10h42

C'est vrai, j'ai oublié de le dire c'est important. Mais pourquoi mon fichier n'est pas trouvé alors qu'il se trouve dans le même dossier que ma page html????

**Bovino** · 02/07/2014, 10h48

Je suppose fortement que ton serveur node ne le prend pas en compte... Il faudrait donc lui indiquer que ce fichier existe et lui dire de renvoyer son contenu lorsqu'il est appelé.

Pour rappel, un serveur node ne fonctionne pas en fonction de l'arborescence des fichiers comme peut le faire Apache.

**sabrinouch** · 02/07/2014, 11h03

Bovino, mon problème est que si je procède comme ça, cela revient à ouvrir un fichier .txt avec une fonction node.js dans mon gestionnaire de requête comme je le fais habituellement; je n'utiliserai donc plus l'objet xmlhttprequest, or je veux absolument utiliser le principe d'ajax. Je n'ai vu aucun exemple sur internet. Pourrais-tu m'éclairer? Je me suis basé sur le tuto de ce site pour construire mon serveur.js je vous envoi les codes:

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;

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;

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
25
26
27
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 'upload' est appelé.");
  fs.readFile('pagetwo.html', 'utf-8', function(error, content) {
        response.writeHead(200, {'Content-Type' : 'text/html'});
        response.end(content);
  });
  if (xhr==true){
    fs.readFile('data.txt', 'utf-8', function(error, content) {
        response.writeHead(200, {'Content-Type' : 'text/html'});
        response.end(content);
    });
  }
}
 
exports.start = start;
exports.accesSession = accesSession;

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

Merci bovino.

**Bovino** · 02/07/2014, 11h19

Que tu appelles un fichier directement depuis le navigateur ou via une requête AJAX, ça ne change rien pour le serveur !
Mais en tout état de cause, c'est le serveur Node qui détermine quel contenu doit renvoyer la requête.

En gros, lorsque tu appelles l'URL http://www.monsite.com/fichier.txt, tu n'appelles pas le fichier fichier.txt mais la ressource identifiée par la chaine "fichier.txt".
Donc tant que tu n'auras pas dit au serveur ce que doit renvoyer cette ressource, il l'a considérera comme inexistante avec une erreur 404.

Mais cela n'a plus rien à voir avec AJAX, c'est spécifique à Node.js...

**sabrinouch** · 02/07/2014, 11h27

Très bien mais comment j'écris ça tout en gardant ma page html comme elle est? Si vous pouviez me donner un exemple de code ça serai cool

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

Poster 2 fois pour le même problème...

Je t'ai répondu sur ton autre sujet et je t'ai donné ton code, modifié, testé et fonctionnel xO

De plus comme tu semble débuter en node et utiliser du code que tu ne comprend pas je t'amène vers ce merveilleux cours interactif pour apprendre à jouer avec node : http://nodeschool.io

Au plaisir.

[AJAX] Ouverture de fichier avec la fonction open d'ajax

AJAX

Discussions similaires

Partager

Partager