AJAX-Anfragen mit RAW-JavaScript stellen Teil 2

Vor ein paar Wochen habe ich gezeigt, wie AJAX-Anfragen mit rohem JavaScript erstellt werden. In der heutigen Screencast, Wir gehen noch einen Schritt weiter, da wir mit PHP eine Datenbank abfragen, in das JSON-Format konvertieren und mit Hilfe von Javascript diese Informationen asynchron anfordern und auf der Seite anzeigen. Wenn Sie gerade erst mit diesen Konzepten beginnen, ist dies das perfekte Video für Sie!

Video

Finales "Laden" -Skript

Dieser Codeblock fordert eine Seite asynchron an und erstellt dann mit dem "Parse" -Skript von Douglass Crockford ein neues globales Objekt. Auf diese Weise können wir die zurückgegebenen JSON-Daten leicht filtern.

 Funktion laden (URL, Rückruf) var xhr; 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  xhr.onreadystatechange = function()  if((xhr.readyState < 4) || xhr.status !== 200) return; callback(xhr); ; xhr.open('GET', url, true); xhr.send(");  load('emails.php', function(xhr)  var response = JSON.parse(xhr.responseText); var container = document.getElementById('container'); for(var i = 0, len = response.length; i < len; i++)  container.innerHTML += '
'+ antwort [i] .name +' : '+ antwort [i] .email +'
'; );

Finales PHP

Vom Video leicht modifiziert, um die Effizienz zu verbessern - eine viel elegantere Lösung als ich ursprünglich vor Ort gefunden hatte.

 query ('SELECT * FROM contactInfo')) $ ReturnsArray = array (); while ($ row = $ result-> fetch_object ()) $ returnArray [] = $ row;  echo json_encode ($ ReturnsArray);  else // Fehler aufgetreten Echo 'Fehler:'. $ mysql-> error; 

Ich hoffe, Sie alle genießen diese "Videoserie, die niemals sein sollte". Ursprünglich war es als einzelnes Tutorial geplant. Aufgrund der Tatsache, dass es so viel zu berichten gibt, möchte ich gerne weitere Videos für Sie erstellen - das heißt, wenn Sie sie haben. Fühlen Sie sich frei, mich wissen zu lassen, was Sie als Nächstes lernen möchten.

• Folgen Sie uns auf Twitter oder abonnieren Sie den NETTUTS-RSS-Feed für mehr tägliche Webentwicklungsberichte und -artikel.