Hur man gör AJAX-förfrågningar med Raw JavaScript Del 2

För några veckor sedan demonstrerade jag hur man gör AJAX-förfrågningar med rå JavaScript. I dagens screencast, Vi tar saker ytterligare ett steg eftersom vi använder PHP för att fråga en databas, konvertera den till JSON-formatet och använd Javascript för att asynkront begära denna information och visa den på sidan. Om du precis börjat med dessa slags koncept är det här den perfekta videon för dig!

Video

Final "Load" Script

Detta block av kod begär asynkront en sida och använder sedan Douglass Crockfords "Parse" -skript för att skapa ett nytt globalt objekt. På det sättet kan vi enkelt filtrera genom de returnerade JSON-data.

 funktionsbelastning (url, återuppringning) var xhr; om (typ av XMLHttpRequest! == 'undefined') xhr = nytt XMLHttpRequest (); annars 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 += '
'+ svar [i] .namn +' : '+ svar [i] .email +'
'; );

Slutlig PHP

Något modifierad från videon för att förbättra effektiviteten - en mycket elegantare lösning än vad jag ursprungligen kommit på med på platsen.

 fråga ("VÄLJ * FRÅN contactInfo")) $ returnedArray = array (); medan ($ row = $ result-> fetch_object ()) $ returnedArray [] = $ row;  echo json_encode ($ returnedArray);  else // error occurred echo 'error:'. $ Mysql-> fel; 

Jag hoppas att ni alla njuter av denna "videoserie som aldrig var tänkt att vara". Ursprungligen planerades det som en enda handledning; På grund av det faktum att det finns så mycket att täcka, skulle jag vilja fortsätta att skapa fler videor till dig - det vill säga om du får dem. Gärna lämna mig vad du vill lära dig nästa.

• Följ oss på Twitter, eller prenumerera på NETTUTS RSS-flödet för fler dagliga webbutvecklingstoppar och artiklar.