[AJAX] Utilisation AJAX en local
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:
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
et voici HelloWorld.xml
Code:
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
Plus d'infos sur l'erreur
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 ???
