[AJAX] Ajouter le contenu d'un fichier html dans un autre fichier html

**alex2746** · 06/09/2013, 12h13

Bonjour,
Je réalise un petit essai Ajax me permettant de tester Ajax : le but est d'insérer dans une page html le contenu d'une autre page html qui ne contient qu'un petit texte.

Fichier ajout.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
function createHTTP() {
	var http;
	try { 
		http=new XMLHttpRequest();
	} catch (e) { 
	try {
		http=new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
	try {
		http=new ActiveXObject("Microsoft.XMLHTTP");
	} catch (e) {
		http=null;
	}
	}
	}
	return http; 
}
 
function include(id, html) {
	var http = createHttp();
	http.open('get', html);
	http.onreadystatechange = function(){ handleResponse( http, id ); }
	http.send(null);
}
 
function handleResponse( http, id ) {
	if (http.readyState==4) {
		if (http.status == 200 ) {
			document.getElementById(id).innerHTML = http.responseText;
		}
	}
}

La page html principale :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<html>
<head>
	<script type="text/javascript" src="ajout.js"></script>
</head>
 
<body>
	<div id="ajout"></div><script type="text/javascript">include('ajout','ajout.html')</script>
	Ceci est la page principale
</body>
</html>

Et enfin la page (ajout.html) que j'aimerais insérer dans la principale :

Code html :

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

1
2
3
4
5
6
7
<html>
<head>	
</head>
<body>
Petit texte à insérer... 
</body>
</html>

Le problème est que... cela ne fonctionne pas! Quand j'ouvre la page principale j'ai uniquement le texte de la page principale... Pourriez-vous m'aider?

Merci :-)

**Bovino** · 06/09/2013, 13h59

Ce n'est pas comme ça qu'il faut utiliser AJAX !
Tu ne peux pas mettre un document HTML dans un élément HTML (sauf avec les frames, mais c'est un autre débat...).
Avec AJAX, tu dois insérer dans l'élément à actualiser le contenu qu'il est supposer contenir, à savoir un fragment HTML.

Tutoriels AJAX pour apprendre les fondamentaux.

**alex2746** · 06/09/2013, 14h04

Merci pour ta réponse.
Si je comprends bien il faudrait que mon document html à insérer dans la page principale ne contienne que la phrase à insérer. Dans mon cas ajout.html contiendrait :

Code :

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

1
2
 
Petit texte à insérer

Mais cela ne fonctionne toujours pas et je ne vois vraiment pas pourquoi... :-(

**Bovino** · 06/09/2013, 14h10

Probablement parce que tu fais du GET et que ton script récupère le contenu du fichier qui est en cache et non celui modifié sur le serveur.

Pourquoi mon xhr ne se met pas à jour (problème de cache) ?

**alex2746** · 06/09/2013, 19h33

J'ai essayé d'ajouter la ligne suivante dans mon script ajout.js mais ça ne change rien :

Code :

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

1
2
 
xhr_object.setRequestHeader("Cache-Control","no-cache");

Pas d'autre idée d'ou peut venir le problème?

**NoSmoking** · 07/09/2013, 11h03

Bonjour,
et avec xhr_object.open(..., url + "&date=" + escape(new Date()), ...);?

**alex2746** · 07/09/2013, 13h13

Non, toujours pareil :-(

**NoSmoking** · 08/09/2013, 14h53

Comment testes tu, en local ou en ligne ?

Invité · 13/09/2013, 21h07

Bonjour,

vous avez créer une fonction nommée createHTTP (avec HTTP en majuscule), mais vous appelez ensuite une fonction qui se nomme createHttp (avec seulement le H en majuscule).

Est-ce que ça viendrait de cette différence ?

**Bovino** · 17/09/2013, 07h47

Ah oui, bien vu chanyslas !

[AJAX] Ajouter le contenu d'un fichier html dans un autre fichier html

AJAX

Discussions similaires

Partager

Partager