mucha gente anda intentando hacer aplicaciones con javascript, pero nadie lo esta haciendo correctamente....
hacer copy&past de códigos aleatorios encontrados por internet no genera nada bueno, solo tendrás "ventanas abiertas" para cualquier tipo de ataque SSX
debido al hecho decidí escribir mi primer aporte a la comunidad (quienes me dieron una mano a pesar de que no sabia absolutamente nada de javascript y html)
NOTAS PREVIAS:
1 - A quienes lean esto, para comprender correctamente como funciona "usen la cabeza!"
2 - Se necesitan conocimientos mínimos en javascript ( OOP ), PHP (v5.3 +) y MySQL
3 - Se Intentara explicar el mínimo de "que hace cada cosa", para información detallada por favor "googlear"
4 - Utiliza una consola de "debug" en javascript (Firebug, Chrome dev, etc...), activa errores en PHP
5 - Ser ordenado te ahorrara dolores de cabeza cuando tengas que buscar errores
6 - existen mejores formas de implementar ajax, sin embargo, para que este aportel sea una aplicación "flexible", se hara un sacrificio en cuanto a optimisacion
...bien, aclaradas las pautas, comencemos!
Espacio de trabajo
* llamaremos a nuestro root folder '/www', aquí pondremos todo nuestro trabajo
* los recursos en '/www/src' para mantener un trabajo limpio
* El servidor MySQL y PHP estará en "localhost"
introducción a ajax, "¿qué es?"
para quienes no entiendan muy bien que es esto de "AJAX" les explico. AJAX es un sistema de carga dinámica de archivos, un conector. Este tiene la capacidad de generar una petición al servidor y retornar su contenido en texto plano, el cual puede manejado/parseado desde javascript.
por temas de seguridad, javascript solo permite iterar con su mismo nombre de origen, si la pagina se cargo desde "http://localhost/" no puedes llamar al servidor con "http://127.0.0.1", este entregara un warning en consola y no cargara el contenido
Existe un método para hacer llamados cross-domain, pero da problemas (sobre todo en IE) por lo que no explicare como hacerlo, con ajax puedes crear infinidades de aplicaciones, tus únicos limites serán "tu imaginación"
código
separar el código en forma de librerías ayuda a mantener orden, limpieza y sobre todo "control" sobre el código que editas.
En este caso, para mantener un cierto orden y facilitar su comprensión, se separar todo en partes de una forma un poco exagerada (habra un comprimido al final por si alguien no comprende como se ordena)
Flujo de la aplicación (sepan disculpar, no tengo ganas de dibujar)
* El cliente realiza un "request", al servidor, este responde con index.html
* El HTML carga sus dependencias e inicia la ejecución de javascript
* El cliente iteractua con el documento HTML, javascript se encarga de llevar las acciones a PHP y este los procesa
[cliente] -- (request) --> [servidor]
[cliente] <-- (index.html) -- [servidor]
[cliente] <-- (ajax.js) -- [servidor]
[cliente] <-- (php.js) -- [servidor]
[cliente] < -- > [javascript] <-- ajax --> [servidor ( documentos.php ) ]
www/index.html
Este documento se hace valer de ajax para realizar las acciones, no es necesario ejecutar código PHP aquí, por que?
El cliente obtiene la semilla, usando javascript llamaremos a los documentos que se encargar de hacer el "trabajo" y nos da resultados de la acción
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- espacio de trabajo en UTF-8 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- incluimos la libreria ajax -->
<!-- incluimos la expresiones php en js -->
<!-- incluimos el codigo de usuario -->
nombre :
<input type="text" id="name" /><br /> <input type="button" value="guardar" onmousedown="send()" /><br /> pagina :
<input type="number" id="pagina" value="1" /><br /> <input type="button" value="listar datos" onmousedown="getData()" />
... no responder, continua