Comment faire des demandes AJAX avec JavaScript brut Partie 2

Il y a quelques semaines, j'ai montré comment créer des requêtes AJAX avec du code JavaScript brut. Dans aujourd'hui screencast, nous allons encore plus loin en utilisant PHP pour interroger une base de données, la convertir au format JSON et utiliser Javascript pour demander de manière asynchrone cette information et l'afficher sur la page. Si vous commencez à utiliser ce type de concepts, voici la vidéo idéale pour vous.!

Vidéo

Final "Load" Script

Ce bloc de code demande de manière asynchrone une page, puis utilise le script "Parse" de Douglass Crockford pour créer un nouvel objet global. De cette façon, nous pouvons facilement filtrer les données JSON renvoyées..

 fonction 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"]]; pour (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 += '
'+ réponse [i] .name +' : '+ réponse [i] .email +'
'; );

PHP final

Légèrement modifié à partir de la vidéo pour améliorer l'efficacité - une solution beaucoup plus élégante que celle que j'avais initialement proposée sur place.

 query ('SELECT * FROM contactInfo')) $ returnArray = array (); while ($ row = $ result-> fetch_object ()) $ returnArray [] = $ row;  echo json_encode ($ returnArray);  else // une erreur est survenue echo 'erreur:'. $ mysql-> error; 

J'espère que vous appréciez tous cette "série de vidéos qui n'a jamais été conçue". A l'origine, il était prévu comme un seul tutoriel. Cependant, étant donné qu'il y a TELLEMENT de sujets à couvrir, j'aimerais continuer à créer davantage de vidéos pour vous, c'est-à-dire si vous en avez. N'hésitez pas à me faire savoir ce que vous aimeriez apprendre ensuite.

• Suivez-nous sur Twitter ou abonnez-vous au fil RSS NETTUTS pour plus d'articles et de sujets sur le développement Web quotidiens.