Cómo hacer solicitudes AJAX con JavaScript en bruto Parte 2

Hace unas semanas, demostré cómo hacer solicitudes AJAX con JavaScript en bruto. En el de hoy screencast, iremos un paso más allá, ya que utilizamos PHP para consultar una base de datos, la convertimos al formato JSON y usamos Javascript para solicitar esta información de forma asíncrona y mostrarla en la página. Si recién está comenzando con este tipo de conceptos, este es el video perfecto para usted.!

Vídeo

Guión final de "carga"

Este bloque de código solicita de forma asíncrona una página, y luego utiliza el script "Parse" de Douglass Crockford para crear un nuevo objeto global. De esa manera, podemos filtrar fácilmente a través de los datos JSON devueltos.

 función de carga (url, devolución de llamada) var xhr; if (typeof XMLHttpRequest! == 'undefined') xhr = new XMLHttpRequest (); else var Versiones = ["Microsoft.XmlHttp", "MSXML2.XmlHttp", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.5.0"]; para (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 += '
'+ respuesta [i] .name +' : '+ respuesta [i] .email +'
'; );

PHP final

Modificado ligeramente con respecto al video para mejorar la eficiencia, una solución mucho más elegante que la que se me ocurrió al momento.

 consulta ('SELECT * FROM contactInfo')) $ returnArray = array (); while ($ row = $ result-> fetch_object ()) $ returnArray [] = $ row;  echo json_encode ($ returnArray);  else // error se produjo echo 'error:'. $ mysql-> error; 

Espero que todos estén disfrutando de esta "serie de videos que nunca debieron ser". Originalmente, fue planeado como un único tutorial; sin embargo, debido al hecho de que hay tanto que cubrir, me gustaría continuar creando más videos para usted, es decir, si los tendrá. Siéntete libre de dejarme saber que te gustaría aprender a continuación.

• Síganos en Twitter o suscríbase a la Fuente RSS de NETTUTS para obtener más artículos y artículos de desarrollo web diarios.