Que faut-il de plus pour Ajax que cette fonction

Question

J'ai une petite fonction JS qui fait Ajax pour moi et une autre similaire qui ajoute des données POST à ​​la requête.Ajax étant un sujet si important avec tant de bibliothèques à ce sujet, qu'est-ce qui me manque dans ma fonction, est-ce peu sûr ou autre chose d'inquiétant ?

function loadPage(pagePath, displayElement)
{
    var xmlHttp;

    try
    {
        // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e)
    {
        // Internet Explorer
        try
        {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            try
            {
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e)
            {
                alert("Your browser does not support AJAX!");
                return false;
            }
        }
    }

    xmlHttp.onreadystatechange=function()
    {
        if(xmlHttp.readyState==4)
        {
            document.getElementById(displayElement).innerHTML = xmlHttp.responseText;
        }
    }

    xmlHttp.open("GET", pagePath, true);
    xmlHttp.send(null);
}

Answer 1

Je vous recommande fortement de ne pas lancer votre propre code Ajax.Utilisez plutôt un framework tel que Prototype, Dojo ou l’un des autres.Ils ont pris soin de gérer tous les ReadyStates que vous ne gérez pas (2 signifie qu'ils ont été envoyés, 3 signifie qu'ils sont en cours, etc.), et ils doivent échapper à la réponse que vous recevez afin que vous n'insériez pas des informations potentiellement non sécurisées. javascript ou quelque chose dans votre page.

Une autre chose qu'un framework plus robuste vous offrira est la possibilité de faire plus que simplement utiliser innerHTML pour remplacer des éléments dans le DOM.Votre fonction ici ne peut être utilisée que pour remplacer un élément par la réponse de l'appel ajax.Vous pouvez faire bien plus avec Ajax.

Answer 2

Je supprimerais cette ligne.

alert("Your browser does not support AJAX!")

Crier après l'utilisateur dans une langue qu'il ne comprend probablement pas est pire qu'un échec.:-)

Answer 3

Je n'ai jamais été fan des blocs try/catch imbriqués, donc je ferais quelque chose comme :

var xmlHttp;
if (window.XMLHttpRequest) {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {
  try {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}

if (xmlHttp) {
  // No errors, do whatever you need.
}

Je pense que ça marchera.Mais comme cela a déjà été mentionné, pourquoi réinventer la roue, utiliser une bibliothèque.Mieux encore, découvrez comment ils procèdent.

Answer 4

jQuery est probablement l'une des bibliothèques populaires les plus légères du marché.

Answer 5

La même chose en prototype :

function loadPage(pagePath, displayElement) {
    new Ajax.Updater(displayElement, pagePath);
}

Ajax.Updater dans l'API prototype

Answer 6

Si vous voulez vraiment voir ce qui vous manque, lisez le code source de jQuery ou Prototype pour leurs routines ajax.S'il y a des numéros de bogues dans les commentaires, recherchez-les également.