Du bist hier:  Seitenreport    Artikel

HowTo: Mehr Speed durch parallele AJAX-Requests

05. April 2011
Matthias GläßnerKommentare: 0

Im September 2010 hatten wir die Seitenreport Analyse-Engine relauncht. Dabei stellten wir die serielle AJAX Abarbeitung (Punkte wurden nacheinander abgearbeitet) auf Parallelbetrieb um. Dies brachte einen erheblichen Geschwindigkeitsvorteil. Doch wie funktionieren parallele AJAX Requests eigentlich? Wie baut man sie auf? Das erfährst Du in diesem Tutorial.

Was Du für dieses Tutorial mitbringen solltest

Ich setze diesem Artikel voraus, dass Du weißt, was AJAX ist und Dir darüber im Klaren bist, warum man AJAX auf Webseiten verwenden sollte. Ferner solltest Du mindestens über JavaScript Grundwissen verfügen, da die parallele AJAX Technik eine etwas fortgeschrittenere Technik ist. Fangen wir an.

Zwei Arrays für unser paralleles AJAX

Als erstes erstellen wir uns zwei Arrays. Das eine Array beinhaltet hinterher die jeweiligen XML HTTP Objekte, über die wir unsere AJAX Funktionen steuern. Das zweite Array beinhaltet die Dateien, die beim jeweiligen Aufruf geladen werden sollen. Dieses Array belegen wir vor mit 4 verschiedenen PHP Dateien. 

  1. var xmlHttpArr = new Array();
  2. var myrequests = new Array(
  3. 'ajax_request_1.php',
  4. 'ajax_request_2.php',
  5. 'ajax_request_3.php',
  6. 'ajax_request_4.php'
  7. );

Der Inhalt dieser PHP Dateien soll in diesem Tutorial von eher nebensächlicher Bedeutung sein. Du kannst sie zu Testzwecken z.B. mit einer einfachen Ausgabe des aktuellen Datums befüllen: echo date('d.m.Y, H:i:s');

XML HTTP Objekte via Funktion erzeugen

Jetzt kommt ein etwas schwierigerer Teil, der Dir aber, wenn Du bereits erste Erfahrungen mit AJAX sammeln konntest, nicht fremd sein sollte. Wir erstellen uns eine Funktion, die browserübergreifend versucht, ein XML HTTP Objekt zu erzeugen und dieses an uns zurückgibt. Da die verschiedenen Browser unterschiedliche XML HTTP Implementierungen verwenden, testen wir per try... catch() die verschiedenen Erstellungsroutinen durch, bis erfolgreich ein XML HTTP Object erzeugt werden konnte.

  1. function createXmlHttpObject(){
  2. var xmlHttp = null;
  3. try{xmlHttp = new XMLHttpRequest();}
  4. catch(e){
  5. try{xmlHttp = new ActiveXObject("msxml2.XMLHTTP");
  6. catch(e){xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}
  7. }
  8. return xmlHttp;
  9. }

AJAX Requests aufbauen und ausführen

Wir wollen nun für jede unserer PHP Dateien im Array myrequests ein XML HTTP Object über unsere eben erzeugte Funktion erstellen lassen und dieses abarbeiten lassen. Dazu basteln wir uns eine Schleife, die jeweils das Object erzeugt, den zugehörigen Adresse aus unserem Array myrequests öffnet und Statusänderungen oder Rückgabewerte an die Funktion parseResults übergibt.

  1. function execAjaxRequests() {
  2. xmlHttpArr = new Array();
  3. for (i=0;i<myrequests.length;i++) {
  4. xmlHttpObj = createXmlHttpObject();
  5. if(xmlHttpObj == null){alert("Dein Browser unterstützt kein AJAX");}
  6. if(typeof(xmlHttpArr[i]) != 'undefined'){
  7. if(xmlHttpArr[i].request != null){
  8. xmlHttpArr[i].request.transport.abort();
  9. xmlHttpArr[i].request = null;
  10. }
  11. }
  12. xmlHttpObj.open("POST",myrequests[i],true);
  13. xmlHttpObj.onreadystatechange = parseResult;
  14. xmlHttpObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  15. xmlHttpObj.send(null);
  16. xmlHttpArr.push(xmlHttpObj);
  17. }
  18. }

Sofern der Browser kein XML HTTP Objekt unterstützt, also der Rückgabewert unserer Erzeugungsroutine NULL ist, lassen wir eine entsprechende Warnmeldung per Alertbox ausgeben. Als Übertragungsmethode unserer AJAX Requests wählen wir die POST Übertragung.

Rückgabewerte und Statuscodes verarbeiten

Wir haben in obigem Abschnitt eine Funktion angegeben, die bei jeder Statusänderung des XML HTTP Objektes aufgerufen wird. Wir nannten sie parseResults. Diese Funktion soll für unsere Zwecke lediglich für alle XML HTTP Objekte prüfen, ob die PHP Datei jeweils fertig geladen wurde und ihr HTTP Statuscode 200 (OK) ist: 

  1. function parseResult(){
  2. for(i=0;i<xmlHttpArr.length;i++){
  3. if(xmlHttpArr[i].readyState==4){
  4. if (xmlHttpArr[i].status==200) {
  5. var resp = xmlHttpArr[i].responseText;
  6. /* Weiterverarbeitung der Rückgabewerte */
  7. /*
  8.   z.B. alert(resp);
  9.   */
  10. }
  11. }
  12. }
  13. }

Im oben auskommentierten Bereich kannst Du z.B. ein alert(resp); einfügen, um Dir die PHP Rückgabe zu Testzwecken über eine Alertbox ausgeben zu lassen. Im produktiven Einsatz können an dieser Stelle Deine DIV-Container stehen, die Du mit den Rückgabewerten befüllen lässt.

Aufruf des AJAX Loaders

Das parallele AJAX können wir nun ganz simpel aufrufen, indem wir an das Ende unserer HTML oder JavaScript Datei das Hauptprogramm execAjaxRequests aufrufen:

  1. execAjaxRequests();

Fazit

In diesem Tutorial werden 4 XML HTTP Object mit insgesamt 4 AJAX-Requests (ajax_request_1.php, ajax_request_2.php usw.) aufgebaut, die parallel abgearbeitet werden.

Im Gegensatz zu einer seriellen Abarbeitung können die PHP Dateien bedeutend schneller abgearbeitet werden, wodurch sich auch die Geschwindigkeit der Auslieferung beim Benutzer beträchtlich erhöht. Es macht also Sinn, sich diese parallel-Implementierung zu eigen zu machen und überall anzuwenden, wo man mit mehreren gleichzeitigen AJAX Requests hantieren möchte.

  •  
  • 0 Kommentar(e)
  •  

Kommentar hinterlassen

Zurück

Mehrfach empfohlen

Seitenreport ist einer der bekanntesten SEO und Website Analyse Dienste im deutschsprachigen Raum und wurde u.a. schon empfohlen:
von Mr. Wong im Wong Letter
vom Leserservice der Deutschen Post
vom Technik Blog SiN
und vielen anderen

Seitenreport API

Verfolge die SERP Positionen Deiner Keywords und erhalte Informationen über verwendete Mikroformate, frage die Ergebnisse unserer Analysen live ab oder greife auf unsere History-Datenbank zu. Dies alles bietet Dir die neue Seitenreport API. Kontaktiere uns, um weitere Infos zu erhalten.