Hvordan lage AJAX-forespørsler med Raw JavaScript Del 2

For noen uker siden viste jeg hvordan å lage AJAX-forespørsler med rå JavaScript. I dagens screen, Vi tar ting et skritt videre, da vi bruker PHP til å spørre en database, konvertere den til JSON-formatet, og bruk Javascript til å asynkront be om denne informasjonen og vise den på siden. Hvis du bare har begynt med disse konseptene, er dette den perfekte videoen for deg!

video

Endelig "Load" Script

Denne koden kodes asynkront etter en side, og bruker deretter Douglass Crockfords "Parse" -skript for å skape et nytt globalt objekt. På den måten kan vi enkelt filtrere gjennom de returnerte JSON-dataene.

 funksjonsbelastning (url, tilbakeringing) var xhr; hvis (type XMLHttpRequest! == 'undefined') xhr = ny XMLHttpRequest (); ellers var versions = ["Microsoft.XmlHttp", "MSXML2.XmlHttp", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.5.0"]; for (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] .name +' : '+ svar [i] .email +'
  • '; );

    Endelig PHP

    Litt endret fra videoen for å forbedre effektiviteten - en mye mer elegant løsning enn det jeg opprinnelig oppdaget på stedet.

     spørring ('VELG * FRA contactInfo')) $ returnedArray = array (); mens ($ row = $ result-> fetch_object ()) $ returnArray [] = $ row;  echo json_encode ($ returnedArray);  else // error occurred echo 'error:'. $ Mysql-> feil; 

    Jeg håper dere alle nyter denne "videoserien som aldri var ment å være". Opprinnelig var det planlagt som en enkelt opplæring; På grunn av det faktum at det er så mye å dekke, vil jeg gjerne fortsette å lage flere videoer for deg - det vil si hvis du har dem. Gi meg beskjed om hva du vil lære neste.

    • Følg oss på Twitter, eller abonner på NETTUTS RSS Feed for flere daglige webutviklingsverktøy og artikler.