1. Home
  2. SEO Artikel
  3. HowTo: Mehr Speed durch parallele AJAX-Requests

HowTo: Mehr Speed durch parallele AJAX-Requests

Veröffentlicht am:
von Matthias Gläßner    0 Kommentare Performance

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.

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. 

var xmlHttpArr = new Array();
var myrequests = new Array(
	'ajax_request_1.php',
	'ajax_request_2.php',
	'ajax_request_3.php',
	'ajax_request_4.php'
);

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');

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. 

function createXmlHttpObject() {
	var xmlHttp = null;
	try{
		xmlHttp = new XMLHttpRequest();
	}
	catch(e) {
		try{
			xmlHttp = new ActiveXObject("msxml2.XMLHTTP");
		catch(e) {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	return xmlHttp;
}

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. 

function execAjaxRequests() {
	xmlHttpArr = new Array();
    for(i=0; i<myrequests.length; i++) {
		xmlHttpObj = createXmlHttpObject();
		if(xmlHttpObj == null) {alert("Dein Browser unterstützt kein AJAX");}
		if(typeof(xmlHttpArr[i]) != 'undefined') {
			if(xmlHttpArr[i].request != null) {
				xmlHttpArr[i].request.transport.abort();
				xmlHttpArr[i].request = null;
			}
		}
                                  
		xmlHttpObj.open("POST", myrequests[i], true);
		xmlHttpObj.onreadystatechange = parseResult;
		xmlHttpObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xmlHttpObj.send(null);
		xmlHttpArr.push(xmlHttpObj);
    }
}

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

function parseResult() {
    for(i=0; i<xmlHttpArr.length; i++){
    	if(xmlHttpArr[i].readyState == 4){
		    if(xmlHttpArr[i].status == 200){
    			var resp = xmlHttpArr[i].responseText;
    			/* Weiterverarbeitung der Rückgabewerte */
    			/* z.B. alert(resp); */
    		}
    	}
    }
}

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. Das parallele AJAX können wir nun ganz simpel aufrufen, indem wir an das Ende unserer HTML oder JavaScript Datei das Hauptprogramm execAjaxRequests aufrufen: 

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.

« zurück zur Artikelübersicht

SEO Tools