nihilismus/ajax.md

## ajax.md

      
    Raw
  

              ajax.md
            
          
    Creando un VirtualHost de Apache

Como usuario root:

Editamos el archivo de configuración de Apache (/etc/httpd/httpd.conf).

Descomentamos las líneas:

#LoadModule rewrite_module lib/httpd/modules/mod_rewrite.so
#Include /etc/httpd/extra/httpd-vhosts.conf

Modificamos la opción ServerName, quedando de la siguiente forma:

ServerName slackware.red.virtual:80


Modificamos el archivo /etc/httpd/extra/httpd-vhosts.conf, quedando de la siguiente forma:

# Virtual Hosts
#
<VirtualHost *:80>
	DocumentRoot "/srv/httpd/htdocs"
	ServerName localhost
	ErrorLog "/var/log/httpd/error_log"
	CustomLog "/var/log/httpd/access_log" common
</VirtualHost>
<VirtualHost *:80>
	DocumentRoot "/srv/httpd/htdocs/alumno.red.virtual"
	ServerName alumno.red.virtual
	ErrorLog "/var/log/httpd/alumno.red.virtual/error_log"
	CustomLog "/var/log/httpd/alumno.red.virtual/access_log" common
	Options FollowSymLinks
	RewriteEngine on
	<Directory "/srv/httpd/htdocs/alumno.red.virtual">
		AllowOverride FileInfo
	</Directory>
</VirtualHost>

Creamos la estructura de directorios/archivos para el VirtualHost

root@slackware:~# mkdir -p /srv/httpd/htdocs/alumno.red.virtual/
root@slackware:~# chown -R alumno:apache /srv/httpd/htdocs/alumno.red.virtual/
root@slackware:~# mkdir -p /var/log/httpd/alumno.red.virtual/
root@slackware:~# chown -R apache:users /var/log/httpd/alumno.red.virtual/


Agregamos al final de /etc/hosts la siguiente línea:
10.0.2.15		alumno.red.virtual alumno


Verificamos que todo este en orden:


root@slackware:~# httpd -f /etc/httpd/httpd.conf -t
Syntax OK
root@slackware:~# ping -c 4 alumno.red.virtual
PING alumno.red.virtual (10.0.2.15) 56(84) bytes of data.
64 bytes from alumno.red.virtual (10.0.2.15): icmp_req=1 ttl=64 time=0.027 ms
64 bytes from alumno.red.virtual (10.0.2.15): icmp_req=2 ttl=64 time=0.030 ms
64 bytes from alumno.red.virtual (10.0.2.15): icmp_req=3 ttl=64 time=0.035 ms
64 bytes from alumno.red.virtual (10.0.2.15): icmp_req=4 ttl=64 time=0.032 ms
--- alumno.red.virtual ping statistics ---
4 packets transmitted, 4 received, 0% packet loss, time 2999ms
rtt min/avg/max/mdev = 0.027/0.031/0.035/0.003 ms

Reinciamos al demonio de Apache:

root@slackware:~# /etc/rc.d/rc.httpd restart
root@slackware:~# netstat -plutn | grep httpd         
tcp6       0      0 :::80                   :::*                    LISTEN      1968/httpd


Con el navegador web accedemos a http://alumno.red.virtual.

Test de AJAX

Como usuario alumno ingresa a /srv/httpd/htdocs/alumno.red.virtual, crea los directorios archivos, css y js. Posteriromente crea los siguientes archivos con su correspondiente contenido:

prueba.html

	<!DOCTYPE html>
	<head>
	    <meta charset="UTF-8">
	    <script type="text/javascript" src="js/codigo.js"></script>
	    <link rel="stylesheet" type="text/css" href="css/estilo.css" />
	</head>
	<body>
	    <h1>AJAX</h1>
	    <form id="id_form">
	        <fieldset>
	            <legend>Formulario</legend>
	            <p>
	                <label for="input_text">input_text:</label>
	                <input type="text" name="input_text" id="input_text" />
	            </p>
	            <p>
	                <input type="button" value="Descargar" id="input_button" />
	            </p>
	        </fieldset>
	    </form>
	    <h1>Resultado:</h1>
	    <table id="resultado"></table>
	</body>
	</html>

js/codigo.js

	function alCargar() {
	    return function() {
	        /* Variable "global" */
	        var xhr;
	        function realizarSolicitudHttp() {
	            /*var servidor = "http://alumno.red.virtual";*/
	            var servidor = "http://" + window.location.host;
	            var archivo = document.getElementById("input_text").value;
	            if (!archivo) {
	                alert("Ingrese el nombre de un archivo");
	                return false;
	            }
	            /*
	             * Para evitar que el navegador web use su cache de la página:
	             *   var url = servidor + ":" + window.location.port + "/" + archivo + (new Date()).getTime();
	             * Documentación: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime
	             */
	            var url = servidor + ":" + window.location.port + "/" + archivo;
	            xhr = new XMLHttpRequest();
	            xhr.onreadystatechange = agregarContenidoDeArchivo;
	            xhr.open('GET', url);
	            xhr.send();
	        }
	        function agregarContenidoDeArchivo() {
	            if (xhr.readyState === 4) {
	                if (xhr.status === 200) {
	                    /* Procesamos el archivo xml */
	                    var documento_xml = xhr.responseXML;
	                    var xml_nodos = documento_xml.firstChild.childNodes;
	                    var tabla = document.getElementById("resultado");
	                    var tabla_tbody = document.createElement("tbody");
	                    tabla.appendChild(tabla_tbody);
	                    for (var i=1; i < xml_nodos.length; i++) {
	                        var tabla_tr = document.createElement("tr");
	                        var nodo_elemento = xml_nodos[i].childNodes;
	                        var tabla_contador = document.createElement("td");
	                        tabla_contador.textContent = i;
	                        tabla_tr.appendChild(tabla_contador);
	                        for (var j=0; j < nodo_elemento.length; j++) {
	                            var tabla_td = document.createElement("td");
	                            tabla_td.textContent = nodo_elemento[j].textContent;
	                            tabla_tr.appendChild(tabla_td);
	                        }
	                        tabla_tbody.appendChild(tabla_tr);
	                    }
	                } else if (xhr.status === 403) {
	                    alert('Error: 403 Forbidden.');
	                } else if (xhr.status === 404) {
	                    alert('Error: 404 Not Found.');
	                } else {
	                    alert('Error: xhr.status');
	                }
	            }
	        }
	        /* Desactiva el "action" del formulario */
	        document.getElementById("id_form").onsubmit = function() { return false; };
	        var boton = document.getElementById("input_button");
	        boton.addEventListener("click", realizarSolicitudHttp);
	    }
	}
	
	document.addEventListener("DOMContentLoaded", alCargar(), false);

css/estilo.css

	/* Hola de estilo */
	
	body {
	    background-color: #DFE32D;
	}
	
	pre table {
	    background-color: #B6BA18;
	}
	
	table, thead, th, tbody, tr, td {
	    border: solid 1px #fff;
	    font-size: 10px;
	}
Notas


En el anfitrión (Windows) busca un archivo con nombre hosts (muy similar a /etc/hosts de GNU/Linux), posiblemente lo encuentres en el directorio C:\Windows\System32\drivers\etc, y agrega al final la línea 127.0.0.1    http://alumno.red.virtual. Finalmente accede con un navegador web desde el anfitrión a http://alumno.red.virtual:8080

Procesando un documento XML


Descarga de http://www.correosdemexico.gob.mx/ServiciosLinea/Paginas/DescargaCP.aspx el archivo XML de algún estado.
Guarda el archivo que descargues de SEPOMEX en /srv/httpd/htdocs/alumno.red.virtual/archivos con el nombre cp.xml.
Solicita el archivo archivos/cp.xml mediante el formulario en prueba.html.