Cos'altro è necessario per Ajax oltre a questa funzione

Question

Ho una piccola funzione JS che esegue Ajax per me e un'altra simile che aggiunge dati POST alla richiesta.Dato che Ajax è un argomento così importante con così tante librerie al riguardo, cosa mi manca nella mia funzione, è insicuro o qualcos'altro preoccupante?

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

Ti consiglio vivamente di non eseguire il rollover del tuo codice Ajax.Utilizza invece un framework come Prototype, Dojo o uno qualsiasi degli altri.Si sono occupati di gestire tutti i ReadyState che non stai gestendo (2 significa che è stato inviato, 3 significa che è in elaborazione, ecc.) e dovrebbero sfuggire alla risposta che ricevi in ​​modo da non inserire dati potenzialmente non sicuri javascript o qualcosa del genere nella tua pagina.

Un'altra cosa che ti darà un framework più robusto è la possibilità di fare di più che usare semplicemente innerHTML per sostituire gli elementi nel DOM.La tua funzione qui può essere utilizzata solo per sostituire un elemento con la risposta dalla chiamata ajax.C'è molto altro che puoi fare con l'Ajax.

Answer 2

Eliminerei questa riga.

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

Gridare all'utente in una lingua che probabilmente non capisce è peggio del fallimento.:-)

Answer 3

Non sono mai stato un fan dei blocchi try/catch nidificati, quindi lo farei in qualcosa del tipo:

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.
}

Penso che funzionerà.Ma come è stato detto prima, perché reinventare la ruota, usare una libreria.Ancora meglio: scopri come lo fanno.

Answer 4

jQuery è probabilmente una delle librerie popolari più leggere in circolazione.

Answer 5

La stessa cosa nel prototipo:

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

Ajax.Updater nell'API prototipo

Answer 6

Se vuoi davvero vedere cosa ti perdi, leggi il codice sorgente jQuery o Prototype per le loro routine ajax.Se ci sono numeri di bug nei commenti, cerca anche quelli.