Mattes: AJAX - Content in Steps laden

Beitrag lesen

Die Tabelle besteht aus 10 Zeilen. Für jede Zeile muss ein Webservice-Aufruf gemacht werden und das inkl. Aufbereitung dauert ca. 1-3 Sekunden.

Nun dachte ich, man könnte hinter einem Ladebalken die Tabelle Zeile für Zeile füllen, damit sich am Bildschirm etwas tut :-)

Da du für jede Zeile eine separate Rückfrage an den oder die Webservices im Hintergrund machst (ich war von einer für die ganze Tabelle ausgegangen), könnte sich die Angelegenheit deutlich vereinfachen.

Auf Seite des Dokuments kannst du grundsätzlich genauso vorgehen wie bisher auch, nur, dass du die empfangenen Daten nicht in das <div> klemmst, sondern in ein stattdessen dafür vorgesehenes <tbody>- bzw. <table>-Element (das <div> schmeisst du raus, es sei denn, es hat noch eine andere Funktion).

Verlagere die zehn Rückfragen aus dem PHP-Skript in den Javascript-Teil. Handelt es sich um nur einen Webservice, sollten alle Rückfragen nacheinander abgearbeitet werden. Sind es verschiedene, kannst du sie parallel starten.

Die AJAX-Funktion bekommt als Parameter den abzufragenden Webservice (bzw. eine ID, die den Service beschreibt) und erwartet eine <tr>-Element als Antwort, die es an die Tabelle anhängt. Du bräuchtest im Javascript-Code nur die abzufragende URL ändern (Service-ID anklemmen) und HTML-seitig das id-Attribut vom alten <div> in die Tabelle verlegen.

Im PHP-Skript fragst du je nach Service-ID den Webservice ab, formatierst, wie bisher auch, seine Antwort als <tr>-Element und gibst dieses aus.
Hattest du im PHP-Skript bisher sowas:

print("<table>")

print("<tr>")
daten = http.get("http://webservice1.example")
print("<td>$platzhalter</td>", daten)
print("<tr>")

print("<tr>")
daten = http.get("http://webservice2")
print("<td>$platzhalter</td>", daten)
print("<tr>")

print("<tr>")
daten = http.get("http://webservice3")
print("<td>$platzhalter</td>", daten)
print("<tr>")

print("</table>")

… machst du jetzt sowas:

print("<tr>")
if ($_GET["service"] == "1") then
   daten = http.get("http://webservice1")
   print("<td>$platzhalter</td>", daten)
else if ($_GET["service"] == "2") then
   daten = http.get("http://webservice2")
   print("<td>$platzhalter</td>", daten)
else if ($_GET["service"] == "3") then
   daten = http.get("http://webservice3")
   print("<td>$platzhalter</td>", daten)
else
   print("<td>Kenn' ich nicht</td>")
print("<tr>")

Das ist jetzt nur ganz grob zur Veranschaulichung, es geht garantiert auch eleganter. Das hängt aber vom konkreten Anwendungsfall ab, bei nur einem Webservice mit gleichförmigen Antworten sollte da schon eine Liste mit den zehn Rückfrage-URLs zum Einsatz kommen, statt zehnmal die immer gleichen Anweisungen daten=hallo() & print(daten) hinzuschreiben. Ich habe es jetzt nur ausführlich hingeschrieben, da ich nicht weiss, was du wie abfragst.

Falls du mit diesem Ansatz nicht weiterkommst, müsstest du deinen Code rausrücken, damit klar wird, wie die Rückfragen genau aussehen (URLs und Daten kannst du ja mit 1.example.com, 2.examle.com, etc. anonymisieren).