Ajax
Páginas: 5 (1026 palabras)
Publicado: 3 de abril de 2012
AJAX de la teoría a la práctica
Este es un mini-tutorial que explica con pasos sencillos, cómo manejar nuestros eventos con AJAX en una página web2.0.
Cargando una página html en un contenedor <div> sin recargar la página.
Necesitas:
· Un servidor web · Un navegador · Un editor de texto Ahora si, ya que sabemos qué mismo es AJAX(click aquí si no sabes), podemos ponerlo en práctica en unejemplo sencillo, fíjense en el código de la página web que tenemos a continuación:
ejemplo.html |
<html> <head><meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″><title>lixcial</title><script language=”javascript” src=”ajax.js” type=”text/javascript”></script></head><body><h2>Ejemplo AJAX</h2><a href=”#”onclick=”requerir(‘feliz.html’)”>feliz</a><div id=”espacio”></div></body></html> |
Noten que en el head incluimos un archivo que contiene código JavaScript que llamaremos “ajax.js”, es en este archivo donde se encuentra la función “requerir” a la cual hacemos referencia en el “onclick” del <a href=”#”>. Ojo que la función recibe una URL, Esta URL es la páginaque deseamos que cargue nuestro requerimiento AJAX, puede ser también un manejador o algo que genere una respuesta de texto (XML por ejemplo). Las URL que le enviamos en nuestro caso es “feliz.html”, una página web normal.
feliz.html |
<html> <head><meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″><title>lixcial</title></head><body></body></html> |
Ahora si, vamos al AJAX:
ajax.js |
var http_request = false;function requerir(url) {http_request = false;if (window.XMLHttpRequest) {http_request = new XMLHttpRequest();if (http_request.overrideMimeType) http_request.overrideMimeType(‘text/xml’);} else if (window.ActiveXObject) {try {http_request = new ActiveXObject(“Msxml2.XMLHTTP”);} catch (e) {try { http_request =new ActiveXObject(“Microsoft.XMLHTTP”); } catch (e) {}}}if (!http_request) {alert(‘Imposible crear una instancia XMLHTTP’);return false;}http_request.onreadystatechange = callback;http_request.open(‘GET’, url, true);http_request.send(null);}function callback() {var espa;if (http_request.readyState == 4) {if (http_request.status == 200){espa=document.getElementById(“espacio”);espa.innerHTML=http_request.responseText;}else alert(‘No se pudo completar el requerimiento’);}} |
Explicación del código de ajax.js
Para poder hacer el requerimiento AJAX, es necesario instanciar un objeto que nos provea este servicio, pero antes pregunta si el requerimiento viene de Internet Explorer (window.ActiveXObject), o de otro navegador (window.XMLHttpRequest), esto lo hacemos con el siguiente if.
|
if(window.XMLHttpRequest) {http_request = new XMLHttpRequest();if (http_request.overrideMimeType) http_request.overrideMimeType(‘text/xml’);} else if (window.ActiveXObject) {try {http_request = new ActiveXObject(“Msxml2.XMLHTTP”);} catch (e) {try { http_request = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (e) {}}} |
Las partes en negrita instancian un objeto HTTPrequest en la variablehttp_request necesario para el requerimiento, el resto son validaciones. Algunas versiones de los navegadores Mozilla no funcionan correctamente si la respuesta del servidor no tiene la cabecera mime de tipo XML. En ese caso es posible usar un método extra que sobreescriba la cabecera enviada por el servidor, en caso que no sea text/xml, por eso incluimos la línea:
if (http_request.overrideMimeType)http_request.overrideMimeType(‘text/xml’);
Ahora necesitamos decirle al objeto HTTPrequest qué función de JavaScript se encargará de procesar la respuesta, lo hacemos asignando el nombre de la función a la propiedad onreadystatechange del objeto.
http_request.onreadystatechange = callback;
Después de especificar qué pasará al recibir la respuesta es necesario hacer la petición. Para esto se...
Este es un mini-tutorial que explica con pasos sencillos, cómo manejar nuestros eventos con AJAX en una página web2.0.
Cargando una página html en un contenedor <div> sin recargar la página.
Necesitas:
· Un servidor web · Un navegador · Un editor de texto Ahora si, ya que sabemos qué mismo es AJAX(click aquí si no sabes), podemos ponerlo en práctica en unejemplo sencillo, fíjense en el código de la página web que tenemos a continuación:
ejemplo.html |
<html> <head><meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″><title>lixcial</title><script language=”javascript” src=”ajax.js” type=”text/javascript”></script></head><body><h2>Ejemplo AJAX</h2><a href=”#”onclick=”requerir(‘feliz.html’)”>feliz</a><div id=”espacio”></div></body></html> |
Noten que en el head incluimos un archivo que contiene código JavaScript que llamaremos “ajax.js”, es en este archivo donde se encuentra la función “requerir” a la cual hacemos referencia en el “onclick” del <a href=”#”>. Ojo que la función recibe una URL, Esta URL es la páginaque deseamos que cargue nuestro requerimiento AJAX, puede ser también un manejador o algo que genere una respuesta de texto (XML por ejemplo). Las URL que le enviamos en nuestro caso es “feliz.html”, una página web normal.
feliz.html |
<html> <head><meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″><title>lixcial</title></head><body></body></html> |
Ahora si, vamos al AJAX:
ajax.js |
var http_request = false;function requerir(url) {http_request = false;if (window.XMLHttpRequest) {http_request = new XMLHttpRequest();if (http_request.overrideMimeType) http_request.overrideMimeType(‘text/xml’);} else if (window.ActiveXObject) {try {http_request = new ActiveXObject(“Msxml2.XMLHTTP”);} catch (e) {try { http_request =new ActiveXObject(“Microsoft.XMLHTTP”); } catch (e) {}}}if (!http_request) {alert(‘Imposible crear una instancia XMLHTTP’);return false;}http_request.onreadystatechange = callback;http_request.open(‘GET’, url, true);http_request.send(null);}function callback() {var espa;if (http_request.readyState == 4) {if (http_request.status == 200){espa=document.getElementById(“espacio”);espa.innerHTML=http_request.responseText;}else alert(‘No se pudo completar el requerimiento’);}} |
Explicación del código de ajax.js
Para poder hacer el requerimiento AJAX, es necesario instanciar un objeto que nos provea este servicio, pero antes pregunta si el requerimiento viene de Internet Explorer (window.ActiveXObject), o de otro navegador (window.XMLHttpRequest), esto lo hacemos con el siguiente if.
|
if(window.XMLHttpRequest) {http_request = new XMLHttpRequest();if (http_request.overrideMimeType) http_request.overrideMimeType(‘text/xml’);} else if (window.ActiveXObject) {try {http_request = new ActiveXObject(“Msxml2.XMLHTTP”);} catch (e) {try { http_request = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (e) {}}} |
Las partes en negrita instancian un objeto HTTPrequest en la variablehttp_request necesario para el requerimiento, el resto son validaciones. Algunas versiones de los navegadores Mozilla no funcionan correctamente si la respuesta del servidor no tiene la cabecera mime de tipo XML. En ese caso es posible usar un método extra que sobreescriba la cabecera enviada por el servidor, en caso que no sea text/xml, por eso incluimos la línea:
if (http_request.overrideMimeType)http_request.overrideMimeType(‘text/xml’);
Ahora necesitamos decirle al objeto HTTPrequest qué función de JavaScript se encargará de procesar la respuesta, lo hacemos asignando el nombre de la función a la propiedad onreadystatechange del objeto.
http_request.onreadystatechange = callback;
Después de especificar qué pasará al recibir la respuesta es necesario hacer la petición. Para esto se...
Leer documento completo
Regístrate para leer el documento completo.