[AJAX] Utilisation AJAX en local

**roca71** · 14/05/2008, 21h49

Bonjour à tous.
J'ai décidé d'apprendre à utiliser AJAX et j'ai parcouru de nombreux tutoriaux mais quelque soit les scripts que je récupère dans les tuto, lorsque je les exécute en local sur ma machine, j'ai des problèmes :
- Sous Firefox : une messagebox s'ouvre avec comme titre "[Application Javascript]" et le message est : "Un problème est survenu avec la requête"
- Sous IE7 : Dans la barre d'état, j'ai un panneau jaune avec u point d'exclamation et le message "Erreur sur la page".

J'ai le script suivant Exemple1.html qui possède 2 liens. Si l'on clique sur le premier, une messageBox s'ouvre avec le message HelloWorld récupérer dans le fichier HelloWorld.html et le 2° fait de même en utilisant le contenu du fichier HelloWorld.xml

Voici Exemple1.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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<html>
<head>
<script type="text/javascript" language="javascript">
    // déclaration de l'objet requête
    var http_request = false;
 
    function HelloWorld(url) {
 
        http_request = false;
 
        if (window.XMLHttpRequest) { // navigateurs différents d'IE
		// création d'un objet représentant la requête HTTP
            http_request = new XMLHttpRequest();
 
		// si nécessaire, on écrase l'en-tête envoyé par le serveur
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
            }
        } else if (window.ActiveXObject) { // IE
            try {
      	    // création d'un objet représentant la requête HTTP
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
 
	  // si la création a échoué, on informe par un message d'erreur
        if (!http_request) {
            alert('Abandon :( Impossible de créer une instance XMLHTTP');
            return false;
        }
 
	  // si tout va bien, on effectue le traitement de la réponse serveur
        http_request.onreadystatechange = function(){
        	if (http_request.readyState == 4) {
            	if (http_request.status == 200) {
             	   alert(http_request.responseText);
            	} else {
            	    alert('Un problème est survenu avec la requête.');
            	}
       	 }
	  }
 
	  // on lance la requête en méthode GET
        http_request.open('GET', url, true);
        http_request.send(null);
 
    }
 
    function HelloWorldXML(url) {
 
        http_request = false;
 
        if (window.XMLHttpRequest) { // navigateurs différents d'IE
		// création d'un objet représentant la requête HTTP
            http_request = new XMLHttpRequest();
 
		// si nécessaire, on écrase l'en-tête envoyé par le serveur
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
            }
        } else if (window.ActiveXObject) { // IE
            try {
      	    // création d'un objet représentant la requête HTTP
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
 
	  // si la création a échoué, on informe par un message d'erreur
        if (!http_request) {
            alert('Abandon :( Impossible de créer une instance XMLHTTP');
            return false;
        }
 
	  // si tout va bien, on effectue le traitement de la réponse serveur
        http_request.onreadystatechange = function(){
        	if (http_request.readyState == 4) {
            	if (http_request.status == 200) {
					var xmldoc = http_request.responseXML;
					var root_node = xmldoc.getElementsByTagName('test').item(0); alert(root_node.firstChild.data);
            	} else {
            	    alert('Un problème est survenu avec la requête.');
            	}
       	 }
	  }
 
	  // on lance la requête en méthode GET
        http_request.open('GET', url, true);
        http_request.send(null);
 
    }
function jah(url,target) {
    // native XMLHttpRequest object
    document.getElementById(target).innerHTML = 'sending...';
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = function() {jahDone(target);};
        req.open("GET", url, true);
        req.send(null);
    // IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = function() {jahDone(target);};
            req.open("GET", url, true);
            req.send();
        }
    }
}
 
function jahDone(target) {
    // only if req is "loaded"
    if (req.readyState == 4) {
        // only if "OK"
        if (req.status == 200) {
            results = req.responseText;
            document.getElementById(target).innerHTML = results;
        } else {
            document.getElementById(target).innerHTML="jah error:\n" +
                req.statusText;
        }
    }
}
</script>
</head>
 
<body>
<span
style="cursor: pointer; text-decoration: underline"
onclick="HelloWorld('helloworld.html')">
	Tester l'application avec appel du fichier HTML
</span>
<br><br>
<span
style="cursor: pointer; text-decoration: underline"
onclick="HelloWorldXML('helloworld.xml')">
	Tester l'application avec appel du fichier XML
</span>
<p onclick="jah('helloworld.xml',GET)"></p>
</body>
</html>

Voici HelloWorld.html

Code :

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

Hello World !

et voici HelloWorld.xml

Code :

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

1
2
3
4
<?xml version="1.0" ?>
<test>
    Hello World !
</test>

Ca fait plusieurs jours que je suis sur ce problème et là ça m'énerve de tourner en rond ! Quelqu'un pourrait m'aiguiller et me dire si mon problème provient de mon code ou s'il faut paramétrer quelque chose sur ma machine ...
Merci d'avance

**roca71** · 14/05/2008, 22h48

Dans IE7, quand je clique sur mon panneau de warning dans la barre d'état, j'ai plus d'infos sur l'erreur : il me dit "Accès refusé" par rapport à la ligne " http_request.open('GET', url, true); " ...

Qu'est qui ne lui plait pas à cet endroit ???

**DoubleU** · 15/05/2008, 09h02

Quand tu dis que tu testes en local, c'est en local sur un serveur quelconque ou en local sans serveur (c'est a dire tous tes fichiers dans un meme répertoire) ?

Si c'est la dernière option, c'est normal, je crois qu'une requete Ajax ne peut pas s'exécuter sans serveur.

**roca71** · 15/05/2008, 09h07

En fait, je fais des tests avec mes fichiers dans un repertoire sur mon PC.
Si tu dis qu'il faut un serveur : quel genre de serveur ? dans aucune documentation on parle de ce genre de chose ...?

**DoubleU** · 15/05/2008, 09h12

C'est vrai que ca parait tellement évident pour celui qui a déja un peu d'expérience que le fait de ne pas le mettre peut entrainer les débutants en erreur ^^

Il te faut donc un serveur web, soit Apache pour ceux qui font du php, Tomcat pour le j2ee, IIS pour .NET. Le plus simple pour toi étant probablement d'utiliser apache dans un distrib du genre wamp. Tu télécharges, tu cliques, tu cliques et c'est installé ^^. Apres tu prends tout ton répertoire, tu le mets sur ton serveur web, et tu appelles ta page html sur ton serveur, et non plus en local.

Ca devrait aller mieux comme ca.

**roca71** · 15/05/2008, 12h48

Merci ! C'est fabuleux, enfin ça fonctionne !
Tourner en rond si longtemps pour une telle broutille ...

Merci beaucoup

[AJAX] Utilisation AJAX en local

JavaScript

Vue hybride

Discussions similaires

Partager

Partager