Inclure un fichier dans une page

Trois méthodes dynamiques: php, javascript seul (sans AJAX), et AJAX


On le rappelle: le javascript est un langage qui s'exécute côté client, c'est-à-dire que le programme en javascript est entièrement téléchargé par l'utilisateur et ensuite exécuté par le navigateur. Entre autre, on peut afficher la source d'une page (Ctrl+u avec firefox) et lire la source de tout le javascript inclus dans la page.
A priori ainsi, en javascript on ne peut pas lire un fichier sur le serveur, tout simplement parce qu'il ne se trouve pas "du bon côté".

Inclure un fichier dynamiquement en php

Avec require ou include.
Au contraire des deux autres méthodes qui suivent, reposant sur javascript, la page est ici entièrement rechargée. L'utilisation de la mise en cache du navigateur permet néanmoins de rendre ce chargement plus rapide. 
<?php $newfile=$_POST['newfile'];
  if (!isset($newfile)) {require("Hello.html");}
  else {require("Ciao.html");}
?>
<form method="POST" action="">
  <button name="newfile" value="1">Changer de fichier</button>
</form>
Affichage:
Hello world !!


Inclure un fichier, dynamiquement et directement en javascript, sans AJAX ou autre

On peut néanmoins facilement modifier les propriétés des objets présents sur une page. On peut ainsi modifier dynamiquement une image (en jouant sur l'attribut src de la balise img).

Il est possible d'inclure un fichier html dans un autre via la balise object:
<object type="text/html" data="fichier.html"></object>
Et ainsi donc, de même qu'on peut modifier via javascript une image, on peut jouer sur la page html insérée, et ainsi faire comme si on avait lu le fichier en question: 
<object type="text/html" data="Hello.html"><object>
<button id="btn1" onclick="chghtml()">Changer le texte</button>

<script>
var i=0
function chghtml() {
  if (i==0) {document.getElementById("obj1").data="fichier1.html";i=1;}
  else {document.getElementById("obj1").data="fichier2.html";i=0}
  dt=document.getElementById("obj1").data
  alert("Fichier inséré:\n"+dt)
}
</script>
Affichage:


Charger dynamiquement un fichier avec AJAX

La méthode "classique" de communication d'application web est: l'utilisateur (ou client), par le biais de manipulation sur son navigateur, envoie une requête qui est une référence à une page web; le serveur effectue des calculs, interprète ainsi cette requête, et renvoie son résultat sous forme d'une page web à destination du navigateur du client. La navigateur à son tour interprète la page et l'affiche au client qui peut alors, après avoir attendu l'arrivée complète de la page, éventuellement la manipuler et effectuer une autre requête…
Le dialogue entre le client et le serveur se déroule de manière synchrone: le serveur attend la requête complète du client avant de l'exécuter, puis retourne sa réponse au client qui attend la transmission de la page complète ainsi formée avant de pouvoir à nouveau interagir.

Ajax (acronyme d'Asynchronous JavaScript and XML ou, en français, JavaScript et XML asynchrones), et un ensemble de technologies, ou encore une "surcouches", ou librairie, de programmes combinant: JavaScript, les CSS, JSON, XML, le DOM et le XMLHttpRequest afin de réaliser de rapides mises à jour d'une page sans avoir à recharger la page intégralement à chaque fois. 

<div id="AffichFile"></div><br/>
<select id="Select" onchange="loadhtml()">
  <option>- Choix -</option>
  <option>Fichier 1</option>
  <option>Fichier 2</option>
</select>
<script>
function loadhtml() {
  var i=document.getElementById("Select").selectedIndex;
  if (i==1) {file="Hello.html"} else if (i==2) {file="Ciao.html"}
  var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    document.getElementById("AffichFile").innerHTML=xmlhttp.responseText}
  }
  xmlhttp.open("GET",file,true);
  xmlhttp.send();
}
</script>
Affichage:


Voir aussi:
LongPage: h2: 1 - h3: 3