Come creare richieste AJAX con JavaScript non elaborato parte 2

Qualche settimana fa, ho dimostrato come fare richieste AJAX con JavaScript non elaborato. In oggi screencast, faremo un ulteriore passo avanti mentre usiamo PHP per interrogare un database, convertirlo nel formato JSON e usare Javascript per richiedere in modo asincrono queste informazioni e visualizzarle sulla pagina. Se hai appena iniziato con questo tipo di concetti, questo è il video perfetto per te!

video

Script "Carica" ​​finale

Questo blocco di codice richiede in modo asincrono una pagina e quindi utilizza lo script "Parse" di Douglass Crockford per creare un nuovo oggetto globale. In questo modo, possiamo filtrare facilmente i dati JSON restituiti.

 function load (url, callback) 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"]; per (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 += '
'+ risposta [i] .name +' : "+ risposta [i] .email +"
'; );

PHP finale

Leggermente modificato dal video per migliorare l'efficienza - una soluzione molto più elegante di quella che ho originariamente trovato sul posto.

 query ('SELECT * FROM contactInfo')) $ returnedArray = array (); while ($ row = $ result-> fetch_object ()) $ returnedArray [] = $ row;  echo json_encode ($ returnedArray);  else // errore si è verificato echo 'errore:'. $ Mysql> errore; 

Spero che vi stiate divertendo con questa "serie di video che non è mai stata pensata". Originariamente, è stato progettato come un singolo tutorial; tuttavia, visto che c'è così tanto da coprire, mi piacerebbe continuare a creare altri video per te, cioè se li avrai. Sentiti libero di farmi sapere cosa vorresti imparare dopo.

• Seguici su Twitter o iscriviti al feed RSS di NETTUTS per ulteriori tuts e articoli di sviluppo web giornalieri.