Cómo hacer solicitudes AJAX con Javascript en bruto

Los marcos de Javascript han convertido las funciones AJAX simples en líneas de una sola línea. Esto es bastante increíble, considerando el hecho de que se necesitarían más de veinte para lograr lo mismo con Javascript en bruto. Sin embargo, es importante saber qué hay "debajo del capó"..


Screencast

Guión final

Este es un script relativamente simple que le permitirá solicitar páginas de forma asíncrona mediante el uso de una función de "carga (URL, CALLBACK)".

 // Nuestra función de "carga" simplificada acepta un parámetro de URL y CALLBACK. load ('test.txt', function (xhr) document.getElementById ('container'). innerHTML = xhr.responseText;); función de carga (url, devolución de llamada) var xhr; if (typeof XMLHttpRequest! == 'undefined') xhr = new XMLHttpRequest (); else var versiones = ["MSXML2.XmlHttp.5.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.2.0", "Microsoft.XmlHttp"] para (var i = 0 , len = versiones.longitud; i < len; i++)  try  xhr = new ActiveXObject(versions[i]); break;  catch(e)  // end for  xhr.onreadystatechange = ensureReadiness; function ensureReadiness()  if(xhr.readyState < 4)  return;  if(xhr.status !== 200)  return;  // all is well if(xhr.readyState === 4)  callback(xhr);   xhr.open('GET', url, true); xhr.send(");  // or with jQuery… $('#container').load('test.txt');

Algunas notas para considerar mientras mira

onreadystatechange se disparará cinco veces según se solicite su página especificada.

  • 0: sin inicializar
  • 1: cargando
  • 2: cargado
  • 3: interactivo
  • 4: completar

Un valor de "4" es lo que estamos buscando. Una vez que se ha alcanzado, sabemos que somos libres de realizar una acción con los datos devueltos.

XMLHttpRequest y ActiveXObject

Los navegadores modernos utilizan el objeto "XMLHttpRequest" para realizar solicitudes asíncronas. Eso significa que, si desea ignorar IE6, puede eliminar la comprobación ActiveXObject - esta sección.

 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 

En su lugar, simplemente podría escribir "var xhr = new XMLHttpRequest ();". Ten cuidado con este método. Una vez abstraído a su propia función de "carga", es fácil mantener el cheque de IE como está.

Salir del espacio global

Si realiza múltiples solicitudes, puede considerar mover su código a su propio objeto. Luego, en lugar de llamar directamente a la función "cargar", utiliza "myObject.load ();". Una guía básica para lograr esto sería:

 var ajax = load: function () // paste here, otherMethod: someFunction () // paste here ajax.load ();

Conclusión

No tengo ninguna duda de que algunos de ustedes dejarán un comentario que indique algo como: "¿Por qué haría esto cuando se puede hacer con solo una línea de jQuery?" La respuesta es porque necesita aprender qué hay debajo del capó de su automóvil, por así decirlo. Frameworks como Mootools y jQuery han hecho que Javascript sea increíblemente accesible para los diseñadores. Si cae en esta categoría, le recomiendo que compre también un libro de Javascript en bruto. No hay nada malo, en mi opinión, con aprender ambos simultáneamente. Solo asegúrate de que aprendas tanto!


Es similar a trabajar con WordPress si no sabes PHP. Claro, es posible, pero ¿realmente quieres?

¡Con suerte, esto debería ponerlo en marcha! Me encantaría escuchar tus pensamientos! Ten un excelente fin de semana. Nos vemos el lunes, o en Twitter!

  • Suscríbase a la fuente RSS de NETTUTS para obtener más artículos y artículos de desarrollo web diarios..