Astuces pour vous aider à développer avec Ajax

La méthode ci-dessous permet de retourner un objet XmlHttpRequest dans tous les navigateurs supportant actuellement cet objet :

function getXMLHTTP(){
  var xhr=null;
  if(window.XMLHttpRequest) // Firefox et autres
  xhr = new XMLHttpRequest();
  else if(window.ActiveXObject){ // Internet Explorer
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e1) {
        xhr = null;
      }
    }
  }
  else { // XMLHttpRequest non supporté par le navigateur
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
  }
  return xhr;
}

Comment évaluer le contenu des balises script retourné par un appel Ajax?

Lorsqu'un appel ajax retourne du contenu HTML contenant des scripts, ceux-ci ne sont pas évalués tout seul si vous vous contentez de les insérer dans votre page. Il est nécessaire de les évaluer à la main.

var mesScripts = document.getElementById("idDuDivDInsertion").getElementsByTagName("script");
for (var i=0; i<mesScripts.length; i++) {
  eval(mesScripts[i].innerHTML);
}

Comment mettre à jour un calque (div) avec un appel Ajax, en utilisant le framework prototype?

Le code suivant va mettre dans l'élement ayant l'identifiant 'idDuDiv' le code HTML retourné par l'appel à la page 'adresseDeLaPage.php' en transmettant le paramètre donné.

var url = 'adresseDeLaPage.php';
var pars = 'param1=valeur1';
var target = 'idDuDiv';
var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars});

Qu'est ce que la notation JSON?

La notation JSON (Javascript Object Notation) est un format permettant le passage des données à un programme Javascript. Ce format est un des format utilisé dans le cadre d'Ajax. Il présente l'avantage d'être plus leger que XML, et d'être très facilement récupérable par le script javascript.

var objet = {"propriété1" : "valeur1" , "propriété2" : "valeur2"}

var objetAvecMethodesJSON = {"disBonjour" : function() {alert('bonjour')}  , "propriété2" : "valeur2"};

L'objet peut être récupéré d'une requete Ajax au format habituel grace à la méthode eval:

var objet = eval(xhr.responseText);

La sortie au format JSON et supporté nativement par PHP 5.2 et est instrumenté par plusieurs bibliothèque Java, C# et dans la plupart des autres langages actuels.

Comment faire apparaitre ou disparaître un objet ?

On a quelques fois besoin de faire apparaître ou masquer certains objets. Comme par exemple pour des info-bulles, des menus, ...

Voici deux fonctions qui permettent de faire apparaître ou disparaître un objet passé en paramètre.

function afficher(obj){
        document.getElementById(obj).style.display = "";
}

function cacher(obj){
        document.getElementById(obj).style.display = "none";
}

Comment supprimer tous les enfants d'un noeud en utilisant les méthodes DOM?

La méthode suivante permet de supprimer tous les enfants d'un noeud DOM, en utilisant uniquement les méthodes du DOM :

var noeud;
while (noeud.childNodes.length>0) {
  noeud.removeChild(noeud.firstChild);
}