Share
Javascript-Frameworks haben aus einfachen AJAX-Funktionen Einzeiler gemacht. Dies ist ziemlich unglaublich, wenn man bedenkt, dass mehr als zwanzig erforderlich wären, um dasselbe mit rohem Javascript zu erreichen. Trotzdem ist es wichtig zu lernen, was "unter der Haube" ist.
Dies ist ein relativ einfaches Skript, mit dem Sie Seiten asynchron mit der Funktion "load (URL, CALLBACK)" anfordern können.
Accentsconagua
// Unsere vereinfachte "load" -Funktion akzeptiert eine URL und einen CALLBACK-Parameter. load ('test.txt', Funktion (xhr) document.getElementById ('container'). innerHTML = xhr.responseText;); Funktion laden (URL, Rückruf) var xhr; if (typeof XMLHttpRequest! == 'undefined') xhr = new XMLHttpRequest (); else var versions = ["MSXML2.XmlHttp.5.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.2.0", "Microsoft.XmlHttp"] für (var i = 0 , len = versions.length; i < len; i++) try xhr = new ActiveXObject(versions[i]); break; catch(e) // end for xhr.onreadystatechange = ensureReadiness; function ensureReadiness() if(xhr.readyState < 4) return; if(xhr.status !== 200) return; // all is well if(xhr.readyState === 4) callback(xhr); xhr.open('GET', url, true); xhr.send("); // or with jQuery… $('#container').load('test.txt'); 
onreadystatechange wird fünfmal ausgelöst, wenn die angegebene Seite angefordert wird.
Wir suchen nach dem Wert "4". Sobald es erreicht ist, wissen wir, dass wir mit den zurückgegebenen Daten eine Aktion ausführen können.
Moderne Browser verwenden das Objekt "XMLHttpRequest", um asynchrone Anforderungen zu stellen. Das heißt, wenn Sie IE6 ignorieren möchten, können Sie die ActiveXObject-Prüfung - diesen Abschnitt - entfernen.
if (typeof XMLHttpRequest! == 'undefined') xhr = new XMLHttpRequest (); else var versions = ["Microsoft.XmlHttp", "MSXML2.XmlHttp", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.5.0"]; für (var i = 0, len = versions.length; i < len; i++) try xhr = new ActiveXObject(versions[i]); break; catch(e) // end for
Stattdessen könnten Sie einfach "var xhr = new XMLHttpRequest ();" schreiben. Seien Sie vorsichtig mit dieser Methode. Nach der Abstraktion zu seiner eigenen "load" -Funktion ist es einfach, den IE-Check so zu lassen, wie er ist.
Wenn Sie mehrere Anforderungen stellen, können Sie Ihren Code in ein eigenes Objekt verschieben. Anstatt die Funktion "load" direkt aufzurufen, verwenden Sie "myObject.load ();". Eine grundlegende Richtlinie, um dies zu erreichen, wäre:
var ajax = load: function () // hier einfügen, otherMethod: someFunction () // hier einfügen ajax.load ();
Ich zweifle nicht daran, dass einige von Ihnen einen Kommentar hinterlassen, in dem Folgendes steht: "Warum sollte ich das jemals tun, wenn es nur mit einer Zeile von jQuery möglich ist?" Die Antwort ist, weil Sie sozusagen lernen müssen, was sich unter der Motorhaube befindet. Frameworks wie Mootools und jQuery haben Javascript für Designer unglaublich zugänglich gemacht. Wenn Sie in diese Kategorie fallen, empfehle ich dringend, dass Sie ein reines Javascript-Buch abholen. Meines Erachtens ist es nicht falsch, gleichzeitig zu lernen. Seien Sie einfach sicher, dass Sie beides lernen!
Es ist vergleichbar mit der Arbeit mit WordPress, wenn Sie PHP nicht kennen. Sicher ist es möglich - aber möchten Sie das wirklich??
Hoffentlich sollte dies Sie zum Laufen bringen! Ich würde gerne deine Gedanken hören! Habe ein schönes Wochenende. Wir sehen uns am Montag oder auf Twitter!
