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

Version imprimable

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:

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:

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:

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.

02/07/2014, 08h41
Bovino

Code:

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

Tu ne peux pas faire de require dans le code client...
02/07/2014, 09h27
andry.aime

Bonjour,

Citation:

Code:

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

Code:

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

A+.

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:

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:

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

Remplace

Citation:

Code:

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:

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

02/07/2014, 10h06
Bovino

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

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:

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:

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:

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>

02/07/2014, 10h32
Bovino

Citation:

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

Ton serveur n'arrive pas à trouver le fichier demandé, c'est tout...
02/07/2014, 10h42
sabrinouch

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????
02/07/2014, 10h48
Bovino

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.

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:

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:

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:

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:

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.

02/07/2014, 11h19
Bovino

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...
02/07/2014, 11h27
sabrinouch

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 ;)
02/07/2014, 20h52
kaari kosaku

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.