Was braucht es für Ajax mehr als diese Funktion?

Question

Ich habe eine kleine JS-Funktion, die Ajax für mich erledigt, und eine ähnliche, die der Anfrage POST-Daten hinzufügt.Da Ajax ein so großes Thema mit so vielen Bibliotheken ist, was übersehe ich in meiner Funktion, ist sie unsicher oder gibt es etwas anderes, das mir Sorgen bereitet?

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

Ich empfehle Ihnen dringend, keinen eigenen Ajax-Code zu erstellen.Verwenden Sie stattdessen ein Framework wie Prototype, Dojo oder eines der anderen.Sie haben sich darum gekümmert, alle ReadyStates zu verarbeiten, die Sie nicht verarbeiten (2 bedeutet, dass es gesendet wurde, 3 bedeutet, dass es in Bearbeitung ist usw.), und sie sollten die Antwort, die Sie erhalten, maskieren, damit Sie nicht potenziell unsicher einfügen Javascript oder etwas in Ihre Seite einbauen.

Eine weitere Sache, die Ihnen ein robusteres Framework bietet, ist die Möglichkeit, mehr zu tun, als nur innerHTML zum Ersetzen von Elementen im DOM zu verwenden.Ihre Funktion hier kann nur verwendet werden, um ein Element durch die Antwort des Ajax-Aufrufs zu ersetzen.Mit Ajax können Sie noch viel mehr tun.

Answer 2

Ich würde diese Zeile entfernen.

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

Den Benutzer in einer Sprache anzuschreien, die er wahrscheinlich nicht versteht, ist schlimmer als ein Misserfolg.:-)

Answer 3

Ich war noch nie ein Fan von verschachtelten Try/Catch-Blöcken, also würde ich es so machen:

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

Ich denke, das wird funktionieren.Aber wie bereits erwähnt: Warum das Rad neu erfinden und eine Bibliothek verwenden?Noch besser: Finden Sie heraus, wie sie es machen.

Answer 4

jQuery ist wahrscheinlich eine der leichtesten beliebten Bibliotheken überhaupt.

Answer 5

Das Gleiche im Prototyp:

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

Ajax.Updater in der Prototype-API

Answer 6

Wenn Sie wirklich sehen möchten, was Ihnen entgeht, lesen Sie den jQuery- oder Prototype-Quellcode für deren Ajax-Routinen.Wenn die Kommentare Fehlernummern enthalten, schlagen Sie diese ebenfalls nach.