Pourquoi pas responseHTML?

Il n'existe pas dans la définition de XMLHttpRequest d'attribut responseHTML comme il y un attribut responseText et responseXML.
Mais ce n'est pas vraiment un problème. Si nous voulons prendre des données dans une autre page web pour les insérer dans la page qui est actuellement affichée cela peut être fait facilement.
L'attribut responseXML contient un document XML au contenu duquel on accède par le DOM. Pour obtenir l'équivalent en HTML, on utilise uniquement une balise <div> avec une fonction JavaScript qui étend les fonctions de base d'Ajax ou du framework que l'on utilise.

Le principe

  1. Une variable ou une balise <div> pour stocker la page web.
    Dans le second cas on empêche le contenu de s'afficher, en utilisant l'attribut CSS display avec la valeur none.
    Une fois la page assignée à la variable ou placée dans la balise on peut accéder au contenu par les fonctions de DOM.
    En fait on n'y placera que le contenu de <body> car on aurait des balises <html> et <head> qui n'ont pas leur place dans le corps de la page.
  2. Une fonction JavaScript.
    Elle utilise Ajax pour lire la page Web en mode texte, donc en la chargeant dans l'attribut responseText, et elle extrait le contenu de la balise <body>.
    Avec trois appels aux fonctions indexOf et un appel à slice, on obtient ce contenu. On pourrait aussi utiliser une expression régulière.

Créer un élément responseHTML

Cela peut être une variable de type Element.

var responseHTML = document.createElement("body");

Cela fonctionnera avec Firefox, mais pas avec Opera.

Créer une balise <div> de stockage

On ajoutera dans la page la balise suivante, n'importe où:

<div id="storage" style="display:none;"> </div>

Le contenu est vide, il servira à stocker le contenu utile de la page web que l'on aura chargée.

Les fonctions JavaScript

La première fonction extrait le contenu utile de la page et le place dans la balise de stockage précédente.

function getBody(content) 
{ 
   var x = content.indexOf("<body");
   x = content.indexOf(">", x);    
   var y = content.lastIndexOf("</body>"); 
   return content.slice(x + 1, y);
}

Une autre fonction remplit le conteneur, soit la variable ou la balise et est employée comme callback par Ajax.

function getContent(content, target)
{
   target.innerHTML =  getBody(content);
}

Afficher l'autre page

Le contenu de l'autre page, stocké dans une balise <div> non visible, sera extrait par une fonction de DOM et utilisé dans la page courante. Pour notre exemple, nous nous contenterons de l'insérer dans une balise <div> qui est visible et dont le contenu s'affichera dès qu'il y sera placé comme on le voit dans l'exemple ci-dessous.

La balise contenant le texte à afficher pour notre exemple est la suivante:

<div id="displayed"> </div>

Pour placer ce que l'on veut dans la partie visible de la page, en l'occurence dans la balise <div> d'id "displayed", on utilise l'instruction suivante:

document.getElementById("displayed").innerHTML = responseHTML.innerHTML;

La démonstration

Une démo très simple va placer ci-dessous dans cette page , le contenu d'une autre page HTML autrepage.html.

Utiliser les méthodes de DOM

Le processus est le même avec une étape de plus. Au lieu d'utiliser l'attribut innerHTML on récupère les balises.
Le code de la fonction callback:

var x = responseHTML.getElementsByTagName("div").namedItem("two");
target.innerHTML = x.innerHTML;
var y = responseHTML.getElementsByTagName("form").namedItem("ajax");
target.innerHTML += y.dyn.value;

Le code de la fonction principale:

var responseHTML = document.getElementById("storage"); 
var target = document.getElementById("displayed"); 
loadHTML(url, callback, responseHTML, target);

Le script

Archives du forum

© 2006-2022 Xul.fr