Foros del Web » Programando para Internet » PHP »

introduccion sistemas dinamicos ( php + ajax )

 Estas en el tema de introduccion sistemas dinamicos ( php + ajax ) en el foro de PHP en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/12/2013, 20:55
 
Fecha de Ingreso: mayo-2009
Ubicación: Japon
Mensajes: 60
Antigüedad: 15 años, 6 meses
Puntos: 12
Información introduccion sistemas dinamicos ( php + ajax )
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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Test ajax + PHP</title>
  5.     
  6.     <!-- espacio de trabajo en UTF-8 -->
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.     
  9.     <!-- incluimos la libreria ajax -->
  10.     <script type="text/javascript" src="src/ajax.js"></script>
  11.     
  12.     <!-- incluimos la expresiones php en js -->
  13.     <script type="text/javascript" src="src/php.js"></script>
  14.     
  15.     <!-- incluimos el codigo de usuario -->
  16.     <script type="text/javascript" src="src/main.js"></script>
  17. </head>
  18.  
  19. <body>
  20.     <div id="menu">
  21.         nombre : <input type="text" id="name" /><br />
  22.         <input type="button" value="guardar" onmousedown="send()" /><br />
  23.         <br />
  24.         pagina : <input type="number" id="pagina" value="1" /><br />
  25.         <input type="button" value="listar datos" onmousedown="getData()" />
  26.     </div>
  27.     
  28.     <div id="contenedor"></div>
  29. </body>
  30. </html>

... no responder, continua
  #2 (permalink)  
Antiguo 24/12/2013, 21:25
 
Fecha de Ingreso: mayo-2009
Ubicación: Japon
Mensajes: 60
Antigüedad: 15 años, 6 meses
Puntos: 12
Respuesta: introduccion sistemas dinamicos ( php + ajax )
www/src/main.js (documento js de usuario)

una vez que se cargue el documento, se prepara el conector ajax

los eventos ([input].onmousdedown) llama a la funcion load() del controlador ajax, la cual deja datos en cola para que el objeto XMLHTTP los procese

los datos son enviados desde javascript a sus respectivos documentos ".php", los cuales tiene ya predefinido sus funciones y/o acciones,
estos retornan "arrays" codificados con serialize(), los cuales serán decodificados con unserialize() por javascript

finalmente se realizan los parsers de datos en javascript y da formato en html para ser puesto en el contenedor

NOTA: nunca envíen sentencias SQL desde ajax para que sean ejecutadas en php, es muy peligroso

Código Javascript: 
Ver original
  1. /*      inicializamos el conector
  2. */
  3. var connector
  4. window.onload = function()
  5. {
  6.     connector = new ajax();
  7. }
  8.  
  9. /*      función para envío
  10. */
  11. function send()
  12. {
  13.     connector.load
  14.     ({
  15.         /*      documento de lado del servidor
  16.         */
  17.         // url : 'http://localhost/ejemplo_input.php',
  18.         url : './ejemplo_input.php',
  19.         
  20.         /*      funcion cuando la carga/proceso este completo
  21.         */
  22.         onload : function(text, status)
  23.         {
  24.             if(text == 'completo')
  25.             {
  26.                 /*      el registro fue existoso, 
  27.                 */
  28.                 alert('se ha guardado los datos')
  29.             }
  30.             else
  31.             {
  32.                 /*      convertimos los datos en objeto o array
  33.                 */
  34.                 var datos = unserialize(text);
  35.                 
  36.                 /*      acciones segun el tipo
  37.                 */
  38.                 switch(datos['type'])
  39.                 {
  40.                     /*      problemas con envio
  41.                     */
  42.                     case 'php':
  43.                         alert('error en php #' + datos['nro'] + ' , ' + datos['msg']);
  44.                         break;
  45.                     
  46.                     /*      problemas con mysql (revisar ejemplo_input.php);
  47.                     */
  48.                     case 'mysql':
  49.                         alert('error en mysql #' + datos['nro'] + ' , ' + datos['msg']);
  50.                         break;
  51.                 }
  52.             }
  53.         },
  54.         
  55.         /*      ocurrio un error durante la carga
  56.         */
  57.         onerror : function(text, status)
  58.         {
  59.             alert('error durante la carga, ('+ status + ') ' + text);
  60.         },
  61.         
  62.         /*      cargamos las variables post
  63.         */
  64.         post : 
  65.         {
  66.             'usuario'       : document.getElementById('name').value,
  67.             'otra_variable' : 'test'
  68.         }
  69.     }); 
  70. }
  71.  
  72.  
  73.  
  74. /*      función para listado
  75. */
  76. function getData()
  77. {
  78.     var pagina = document.getElementById('pagina').value;
  79.     
  80.     connector.load
  81.     ({
  82.         /*      documento de lado del servidor
  83.         */
  84.         //url : 'http://localhost/ejemplo_datos.php',
  85.         url : './ejemplo_datos.php',
  86.             
  87.         /*      funcion cuando la carga/proceso este completo
  88.         */
  89.         onload : function(text, status)
  90.         {
  91.             /*      convertimos los datos en objeto o array
  92.             */
  93.             var datos = unserialize(text);
  94.             
  95.             /*      acciones segun el tipo de respuesta
  96.             */
  97.             switch(datos['type'])
  98.             {
  99.                 /*      datos correctos
  100.                 */
  101.                 case 'data':
  102.                     /*      reescribimos la variable (asi no tener que acceder en modo array)
  103.                     */
  104.                     datos = datos['data'];
  105.                     console.log(datos);
  106.                     
  107.                     /*      verificar datos
  108.                     */
  109.                     switch(datos.length)
  110.                     {
  111.                         case 0:
  112.                             alert('no hay datos');
  113.                             break;
  114.                         
  115.                         case 25:
  116.                             alert('hay mas datos en la siguiente pagina');
  117.                             break;
  118.                         
  119.                         default:
  120.                             alert('ultima pagina');
  121.                     }
  122.                     
  123.                     /*      inicializar variables del loop de forma local
  124.                     */
  125.                     var html = '', 
  126.                         resultado;
  127.                         
  128.                     /*
  129.                             Loop de datos, aqui es practicamente lo mismo que result = mysql_fetch_assoc() en php
  130.                             
  131.                             NOTA: no usare DOM, ya que le complicara la cabeza a mas de uno
  132.                     */
  133.                     for(var a in datos)
  134.                     {
  135.                         /*      result = mysql_fetch_assoc();
  136.                         */
  137.                         resultado = datos[a];
  138.                         
  139.                         /*      incluir datos al buffer
  140.                         */
  141.                         html += '<div>id ' + resultado['id'] + ' : ' + resultado['usuario'] + '</div>';
  142.                     }
  143.                     
  144.                     /*      datos del buffer al contenedor
  145.                     */
  146.                     document.getElementById('contenedor').innerHTML = html;
  147.                     break;
  148.                 
  149.                 
  150.                 /*      problemas con envios o errores de datos
  151.                 */
  152.                 case 'php':
  153.                     alert('error en php #' + datos['nro'] + ' , ' + datos['msg']);
  154.                     break;
  155.                 
  156.                 
  157.                 /*      problemas con mysql (revisar ejemplo_input.php);
  158.                 */
  159.                 case 'mysql':
  160.                     alert('error en mysql #' + datos['nro'] + ' , ' + datos['msg']);
  161.                     break;
  162.             }
  163.         },
  164.         
  165.         
  166.         /*      ocurrio un error durante la carga
  167.         */
  168.         onerror : function(text, status)
  169.         {
  170.             alert('error durante la carga, ('+ status + ') ' + text);
  171.         },
  172.         
  173.         /*      cargamos las variables post
  174.         */
  175.         post : 
  176.         {
  177.             'pagina' : pagina
  178.         }
  179.     });
  180. }


/www/src/ajax.js (el controlador AJAX)

crea un objeto XMLHTTP y va poniendo datos en cola (esta es una librería muy vieja, la hice hace 3 años atrás aproximadamente)

Código Javascript: 
Ver original
  1. var ajax = function()
  2. {
  3.     /*  se carga el objeto XMLHTTP
  4.     */
  5.     try
  6.     {
  7.         req = new XMLHttpRequest();
  8.     }
  9.     catch(err1)
  10.     {
  11.         /*      exepcion para IE
  12.         */
  13.         try
  14.         {
  15.             req = new ActiveXObject('Msself.xml2.XMLHTTP');
  16.         }
  17.         catch(err2)
  18.         {
  19.             try
  20.             {
  21.                 req = new ActiveXObject('Microsoft.XMLHTTP');
  22.             }
  23.             catch(err3)
  24.             { 
  25.                 req = false; alert('ajax no soportado');
  26.             }
  27.         }
  28.     }
  29.     
  30.     /*      varuable interna de request
  31.     */
  32.     this.xml = req;
  33.     
  34.     /*      buffer de peticiones (request)
  35.     */
  36.     this.req = [];
  37. };
  38.  
  39. // prototipo (metodos)
  40. ajax.prototype =
  41. {
  42.     /*      funcion de carga / cola
  43.     */
  44.     load : function (object)
  45.     {
  46.         /*      se comprueba las variables post
  47.         */
  48.         if(!object.post){ object.post = {} }
  49.         
  50.         /*      se pone en cola el archivo
  51.         */
  52.         this.req.push
  53.         ({
  54.             url     : object.url,
  55.             onerror : object.onerror,
  56.             onload  : object.onload,
  57.             post    : object.post
  58.         });
  59.         
  60.         /*      se realiza un llamado al engine
  61.         */
  62.         this.engine();
  63.     },
  64.     
  65.     
  66.     /*      controlador del motor ajax
  67.     */
  68.     engine : function()
  69.     {
  70.         /*
  71.             se comprueba el estado de ajax
  72.             si esta "ocupado" no se ejecuta ninguna accion
  73.         */
  74.         
  75.         if(this.xml.readyState == 4 || this.xml.readyState == 0)
  76.         {
  77.             /*
  78.                     se carga el objeto actual,
  79.                     sirve para evitar problemas de contexto
  80.             */
  81.             var self    = this;
  82.             
  83.             /*      se carga la varliable de peticion
  84.             */
  85.             var request = this.req[0];
  86.             
  87.             /*      se abre la url
  88.             */
  89.             self.xml.open('POST', request.url, true);
  90.             
  91.             /*      se incluye el header para post 
  92.             */
  93.             self.xml.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  94.             
  95.             /*      se incluye la funcion para cambio de estado
  96.             */
  97.             self.xml.onreadystatechange = function()
  98.             {
  99.                 /*      si esta completado el proceso, se parsea la respuesta
  100.                 */
  101.                 if(self.xml.readyState == 4)
  102.                 {
  103.                     /*      try a catch para evitar que se interumpa su ejecucion
  104.                     */
  105.                     try
  106.                     {
  107.                         switch(self.xml.status)
  108.                         {
  109.                             case 200: // correcto
  110.                             case 304:
  111.                                 /*  llamar a la funcion de usuario "onload" y enviar el los datos
  112.                                 */
  113.                                 request.onload(self.xml.responseText, self.xml.status);
  114.                                 break;
  115.                                 
  116.                             default:
  117.                                 /*
  118.                                         ocurrio un error durante la carga,
  119.                                         realizar un mensaje a consola y llamar a la funcion "onerror"
  120.                                 */
  121.                                 console.log('ajax error: ('+ self.xml.status +') ',self.xml.responseText);
  122.                                 
  123.                                 /*      verificar si la funcion existe (no vacia)
  124.                                 */
  125.                                 if(request.onerror)
  126.                                 {
  127.                                     request.onerror(self.xml.responseText, self.xml.status)
  128.                                 }
  129.                         }
  130.                     }
  131.                     catch(e)
  132.                     {
  133.                         /*      ocurrio un error en request.onload o request.onerror
  134.                         */
  135.                         console.log(e);
  136.                         alert('error ajax:' + e.message);
  137.                     }
  138.                     
  139.                     /*      eliminar la peticion actual (ya fue procesada)
  140.                     */
  141.                     self.req.splice(0,1);
  142.                     
  143.                     /*      si hay mas datos en el buffer, se llama nuevamente a esta funcion
  144.                     */
  145.                     if(self.req.length > 0)
  146.                     {
  147.                         self.engine();
  148.                     }
  149.                 }
  150.             }
  151.             
  152.             /*      buffer the las variables post
  153.             */
  154.             var post_string = '';
  155.             
  156.             /*      se prepara y da formato a las variables
  157.             */
  158.             for(a in request.post)
  159.             {
  160.                 /*      evitar problemas con caracteres reservados
  161.                 */
  162.                 request.post[a] = encodeURIComponent(request.post[a]);
  163.                 
  164.                 /*      se incrementa el buffer
  165.                 */
  166.                 post_string += (post_string != '' ? '&' : '') + a + '=' + request.post[a];
  167.             }
  168.             
  169.             /*      se envian los headers de la peticion
  170.             */
  171.             self.xml.send(post_string);
  172.         }
  173.     }
  174. }

ejemplo de uso

Código Javascript: 
Ver original
  1. // inicializar cotrolador
  2. var conector = new ajax();
  3.  
  4. // se pone un pedido en cola
  5.  
  6. conector.load(
  7. {
  8.    // url a cargar
  9.    url : 'url',
  10.  
  11.    // función cuando la carga se completa
  12.    onload : function(texto_de_respuesta, estado)
  13.    {
  14.           // se ejecuta la funcion del pedido 
  15.    },
  16.  
  17.    // función cuando ocurre un error
  18.    onerror : function(texto_de_repuesta, estado)
  19.    {
  20.          // codigo de exepcion
  21.    },
  22.  
  23.    // variables post
  24.    post :
  25.    {
  26.          'nombre de la variable' : 'contenido [string:int]'
  27.    }
  28. })

sigue....
  #3 (permalink)  
Antiguo 24/12/2013, 21:28
 
Fecha de Ingreso: mayo-2009
Ubicación: Japon
Mensajes: 60
Antigüedad: 15 años, 6 meses
Puntos: 12
Respuesta: introduccion sistemas dinamicos ( php + ajax )
www/src/php.js (unserialize)

esta función es de phpjs.org, decodifica los datos codificados desde php con serialize()

Código Javascript: 
Ver original
  1. function unserialize (data) {
  2.   // From: http://phpjs.org/functions
  3.   // +     original by: Arpad Ray (mailto:[email protected])
  4.   // +     improved by: Pedro Tainha (http://www.pedrotainha.com)
  5.   // +     bugfixed by: dptr1988
  6.   // +      revised by: d3x
  7.   // +     improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  8.   // +        input by: Brett Zamir (http://brett-zamir.me)
  9.   // +     improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  10.   // +     improved by: Chris
  11.   // +     improved by: James
  12.   // +        input by: Martin (http://www.erlenwiese.de/)
  13.   // +     bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  14.   // +     improved by: Le Torbi
  15.   // +     input by: kilops
  16.   // +     bugfixed by: Brett Zamir (http://brett-zamir.me)
  17.   // +      input by: Jaroslaw Czarniak
  18.   // +     improved by: Eli Skeggs
  19.   // %            note: We feel the main purpose of this function should be to ease the transport of data between php & js
  20.   // %            note: Aiming for PHP-compatibility, we have to translate objects to arrays
  21.   // *       example 1: unserialize('a:3:{i:0;s:5:"Kevin";i:1;s:3:"van";i:2;s:9:"Zonneveld";}');
  22.   // *       returns 1: ['Kevin', 'van', 'Zonneveld']
  23.   // *       example 2: unserialize('a:3:{s:9:"firstName";s:5:"Kevin";s:7:"midName";s:3:"van";s:7:"surName";s:9:"Zonneveld";}');
  24.   // *       returns 2: {firstName: 'Kevin', midName: 'van', surName: 'Zonneveld'}
  25.   var that = this,
  26.     utf8Overhead = function (chr) {
  27.       // http://phpjs.org/functions/unserialize:571#comment_95906
  28.       var code = chr.charCodeAt(0);
  29.       if (code < 0x0080) {
  30.         return 0;
  31.       }
  32.       if (code < 0x0800) {
  33.         return 1;
  34.       }
  35.       return 2;
  36.     },
  37.     error = function (type, msg, filename, line) {
  38.       throw new that.window[type](msg, filename, line);
  39.     },
  40.     read_until = function (data, offset, stopchr) {
  41.       var i = 2, buf = [], chr = data.slice(offset, offset + 1);
  42.  
  43.       while (chr != stopchr) {
  44.         if ((i + offset) > data.length) {
  45.           error('Error', 'Invalid');
  46.         }
  47.         buf.push(chr);
  48.         chr = data.slice(offset + (i - 1), offset + i);
  49.         i += 1;
  50.       }
  51.       return [buf.length, buf.join('')];
  52.     },
  53.     read_chrs = function (data, offset, length) {
  54.       var i, chr, buf;
  55.  
  56.       buf = [];
  57.       for (i = 0; i < length; i++) {
  58.         chr = data.slice(offset + (i - 1), offset + i);
  59.         buf.push(chr);
  60.         length -= utf8Overhead(chr);
  61.       }
  62.       return [buf.length, buf.join('')];
  63.     },
  64.     _unserialize = function (data, offset) {
  65.       var dtype, dataoffset, keyandchrs, keys, contig,
  66.         length, array, readdata, readData, ccount,
  67.         stringlength, i, key, kprops, kchrs, vprops,
  68.         vchrs, value, chrs = 0,
  69.         typeconvert = function (x) {
  70.           return x;
  71.         };
  72.  
  73.       if (!offset) {
  74.         offset = 0;
  75.       }
  76.       dtype = (data.slice(offset, offset + 1)).toLowerCase();
  77.  
  78.       dataoffset = offset + 2;
  79.  
  80.       switch (dtype) {
  81.         case 'i':
  82.           typeconvert = function (x) {
  83.             return parseInt(x, 10);
  84.           };
  85.           readData = read_until(data, dataoffset, ';');
  86.           chrs = readData[0];
  87.           readdata = readData[1];
  88.           dataoffset += chrs + 1;
  89.           break;
  90.         case 'b':
  91.           typeconvert = function (x) {
  92.             return parseInt(x, 10) !== 0;
  93.           };
  94.           readData = read_until(data, dataoffset, ';');
  95.           chrs = readData[0];
  96.           readdata = readData[1];
  97.           dataoffset += chrs + 1;
  98.           break;
  99.         case 'd':
  100.           typeconvert = function (x) {
  101.             return parseFloat(x);
  102.           };
  103.           readData = read_until(data, dataoffset, ';');
  104.           chrs = readData[0];
  105.           readdata = readData[1];
  106.           dataoffset += chrs + 1;
  107.           break;
  108.         case 'n':
  109.           readdata = null;
  110.           break;
  111.         case 's':
  112.           ccount = read_until(data, dataoffset, ':');
  113.           chrs = ccount[0];
  114.           stringlength = ccount[1];
  115.           dataoffset += chrs + 2;
  116.  
  117.           readData = read_chrs(data, dataoffset + 1, parseInt(stringlength, 10));
  118.           chrs = readData[0];
  119.           readdata = readData[1];
  120.           dataoffset += chrs + 2;
  121.           if (chrs != parseInt(stringlength, 10) && chrs != readdata.length) {
  122.             error('SyntaxError', 'String length mismatch');
  123.           }
  124.           break;
  125.         case 'a':
  126.           readdata = {};
  127.  
  128.           keyandchrs = read_until(data, dataoffset, ':');
  129.           chrs = keyandchrs[0];
  130.           keys = keyandchrs[1];
  131.           dataoffset += chrs + 2;
  132.  
  133.           length = parseInt(keys, 10);
  134.           contig = true;
  135.  
  136.           for (i = 0; i < length; i++) {
  137.             kprops = _unserialize(data, dataoffset);
  138.             kchrs = kprops[1];
  139.             key = kprops[2];
  140.             dataoffset += kchrs;
  141.  
  142.             vprops = _unserialize(data, dataoffset);
  143.             vchrs = vprops[1];
  144.             value = vprops[2];
  145.             dataoffset += vchrs;
  146.  
  147.             if (key !== i)
  148.               contig = false;
  149.  
  150.             readdata[key] = value;
  151.           }
  152.  
  153.           if (contig) {
  154.             array = new Array(length);
  155.             for (i = 0; i < length; i++)
  156.               array[i] = readdata[i];
  157.             readdata = array;
  158.           }
  159.  
  160.           dataoffset += 1;
  161.           break;
  162.         default:
  163.           error('SyntaxError', 'Unknown / Unhandled data type(s): ' + dtype);
  164.           break;
  165.       }
  166.       return [dtype, dataoffset - offset, typeconvert(readdata)];
  167.     }
  168.   ;
  169.  
  170.   return _unserialize((data + ''), 0)[2];
  171. }
  #4 (permalink)  
Antiguo 24/12/2013, 21:38
 
Fecha de Ingreso: mayo-2009
Ubicación: Japon
Mensajes: 60
Antigüedad: 15 años, 6 meses
Puntos: 12
Respuesta: introduccion sistemas dinamicos ( php + ajax )
www/mysql.php (connector a mysql)

este documento se encarga de connectar php con mysql (con mysqli)

Código PHP:
<?php

/*        conecta con la base de datos
*/
$mysqli = new mysqli('localhost', 'user', 'pass', 'database');

/*        comprueba si hay errores
*/
if($mysqli->connect_errno > 0)
{
    echo 'error de conexion:'.self::$mysqli->connect_errno;
}

/*        cambia el conjunto de caracteres a UTF-8 (opcional)
*/
if(!$mysqli->set_charset("utf8"))
{
    echo 'error al cambiar names #'.self::$mysqli->errno.', msg:'.self::$mysqli->error;
}

?>
www/ejemplo_input.php (documento de almacenado js -> php -> mysql )

este documento simplemente se encargara de recibir la variable 'usuario' y 'otra_variable' para comprobarla e incluirla en la base de datos, cuando retorna un array codificado con serialize() a exepcion cuando todo a sido exitoso, en ese caso retorna un 'completo'

Código PHP:
<?php

// comprobaciones
switch(true)
{
    // comprobar variable $_POST['usuario']
    case !isset($_POST['usuario']):
        
        // $_POST['usuario'] no esta definido
        echo serialize(array
        (
            'type'     => 'php',
            'nro'         => 0,
            'msg'     => 'variable usuario no definida'
        ));
        break;
    
    // comprobar longitud de la cadena
    case mb_strlen($_POST['usuario'], 'UTF-8') < 4:
         
        // nombre demaciado corto
        echo serialize(array
        (
            'type'     => 'php',
            'nro'         => 1,
            'msg'     => 'nombre demaciado corto'
        ));
        break;
        
    // comprobar longitud de la cadena
    case mb_strlen($_POST['usuario'], 'UTF-8') > 64:
    
        // nombre demaciado largo
        echo serialize(array
        (
            'type'     => 'php',
            'nro'         => 2,
            'msg'     => 'nombre muy largo'
        ));
        break;
    
    // los datos ingresados son correctos se procede a ingresar los datos en la base de datos
    default:
        
        // se incluye el documento de conexion, este es accesible desde $mysqli
        include 'mysql.php';

        // se limpian los datos que vienen desde javascript, seguridad minima
        $_POST['usuario']         = $mysqli->real_escape_string($_POST['usuario']);
        $_POST['otra_variable'] = $mysqli->real_escape_string($_POST['otra_variable']);
        
        // se intenta incluir los datos en la base de datos
        if(!$mysqli->query("INSERT INTO `names` (`usuario`, `example`) VALUES ('{$_POST['usuario']}', '{$_POST['otra_variable']}')"))
        {
            // error al insertar, retornamos los datos del mysql
            echo serialize(array
            (
                'type'    => 'mysql',
                'nro'    => $mysqli->errno,
                'msg'    => $mysqli->error
            ));
        }
        else
        {
            echo 'completo';
        }
}

?>
www/ejemplo_datos.php (listado de datos php -> mysql -> php -> js)

se encarga de recibir la pagina (offset) a listar y retorna sus respectivos datos en un array codificado con serialize()

Código PHP:
// comprobaciones
switch(true)
{
    // variable pagina no disponible
    case !isset($_POST['pagina']):
    
        // la variable $_POST['pagina'] no esta definida
        echo serialize(array
        (
            'type'     => 'php',
            'nro'     => 3,
            'msg'     => 'variable pagina no definida'
        ));
        break;
    
    // comprobar
    case (int)$_POST['pagina'] < 1:
    
        // offset incorrecto
        echo serialize(array
        (
            'type'  => 'php',
            'nro'    => 4,
            'msg'    => 'offset incorrecto, debe ser mayor a cero'
        ));
        break;
    
    // datos correctos, trabajar con mysql
    default:
    
        // incluir conexion
        include 'mysql.php';

        // definir la cantidad de resultados por pagina
        $resultados_por_pagina = 25;
        
        // calculo del offset
        $offset = ((int)$_POST['pagina'] - 1) * $resultados_por_pagina;
        
        // intentamos obtener todos los datos de la tabla names ordenadas por nombre de usuario
        if(!$query = $mysqli->query("SELECT * FROM `names` ORDER BY `usuario` ASC LIMIT {$offset}, {$resultados_por_pagina}"))
        {
            // error al insertar, retornamos los datos de error de mysql
            echo serialize(array
            (
                'type'    => 'mysql',
                'nro'    => $mysqli->errno,
                'msg'    => $mysqli->error
            ));
        }
        
        // buffer de datos
        $buffer = array();
        
        // cargamos datos en el buffer
        while($resultado = $query->fetch_assoc())
        {
            $buffer[] = $resultado;
        }
        
        // enviamos los datos de buffer
        echo serialize(array
        (
            'type'    => 'data',
            'data'    => $buffer
        ));
} 
  #5 (permalink)  
Antiguo 24/12/2013, 21:57
 
Fecha de Ingreso: mayo-2009
Ubicación: Japon
Mensajes: 60
Antigüedad: 15 años, 6 meses
Puntos: 12
Respuesta: introduccion sistemas dinamicos ( php + ajax )
finalmente la base de datos, aqui se introduciran los datos de los archivos ".php"

Código SQL: 
Ver original
  1. CREATE TABLE IF NOT EXISTS `names` (
  2.   `id` BIGINT(20) NOT NULL AUTO_INCREMENT,
  3.   `usuario` VARCHAR(64) DEFAULT NULL,
  4.   `example` VARCHAR(64) DEFAULT NULL,
  5.   PRIMARY KEY (`id`),
  6.   UNIQUE KEY `usuario` (`usuario`)
  7. ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_general_mysql500_ci AUTO_INCREMENT=1 ;

aquí tienen el ejemplo funcionando http://nksn.net/example/forosdelweb_ajax/index.php

espero que le alla servido a alguien... buena suerte
  #6 (permalink)  
Antiguo 25/12/2013, 20:11
Avatar de pateketrueke
Modernizr
  
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 26.399
Antigüedad: 16 años, 8 meses
Puntos: 2534
Respuesta: introduccion sistemas dinamicos ( php + ajax )
Está bueno el tema, sin embargo me llamó la atención el uso de serialize/unserialize que se me hace extremadamente innecesario.

Es decir, lo mejor sería usar JSON, o en el peor de los casos XML para la transferencia de datos.

Consulta el manual: http://www.php.net/manual/en/ref.json.php
__________________
Y U NO RTFM? щ(ºдºщ)

No atiendo por MP nada que no sea personal.
  #7 (permalink)  
Antiguo 25/12/2013, 20:35
 
Fecha de Ingreso: mayo-2009
Ubicación: Japon
Mensajes: 60
Antigüedad: 15 años, 6 meses
Puntos: 12
Respuesta: introduccion sistemas dinamicos ( php + ajax )
había pensado lo mismo, ya que es mas rápido que serialize.... aunque json no esta por defecto en muchos casos (para evitar problemas de plataforma, decidí usar serialize el cual es nativo)

La acción de codificar y decodificar los datos para utilizarlos en javascript, es con el único fin de hacer aplicaciones de interfaces, las cuales requieren de un gran dinamismo y velocidad

El caso anterior no seria muy útil para validar campos simplemente, hay muchos recursos que no son realmente necesario, pero para quienes se inician es como "anillo al dedo", pues puedes realizar envió y recepción de datos para luego trabajarlos tranquilamente desde javascript

PD: gracias por responder, creí que a nadie le había interesado el post .-.
  #8 (permalink)  
Antiguo 26/12/2013, 01:54
Avatar de caricatos
Moderador
  
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Respuesta: introduccion sistemas dinamicos ( php + ajax )
Hola:

No te parece que suena a "fanfarronería":

Cita:
Iniciado por nksn Ver Mensaje
mucha gente anda intentando hacer aplicaciones con javascript, pero nadie lo esta haciendo correctamente....
Aunque en parte estoy de acuerdo, pero también veo que "entras en ese saco"

Y sobre Ajax, no entiendo ¿porqué se omite el significado de la "x": XML?

Todavía no he encontrado en las alternativas lograr el uso de Ajax de forma accesible, en cambio con la implementación de respuestas en formato xml sí... es más, a veces puede servir rutinas que se desarrollan para crear ficheros rss o sitemaps... aunque eso es otra cuestión...

Cita:
Iniciado por nksn Ver Mensaje
...
La acción de codificar y decodificar los datos para utilizarlos en javascript, es con el único fin de hacer aplicaciones de interfaces, las cuales requieren de un gran dinamismo y velocidad
...
Justamente leer un xml es usar el DOM.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #9 (permalink)  
Antiguo 26/12/2013, 02:04
Avatar de moriorGames  
Fecha de Ingreso: diciembre-2013
Ubicación: Barcelona
Mensajes: 37
Antigüedad: 11 años
Puntos: 3
Respuesta: introduccion sistemas dinamicos ( php + ajax )
Hola nksn, un post excelente. Me ha parecido muy bien la mayoría de las cosas que has explicado en este tema, sin embargo, creo que estás complicando las cosas a los usuarios que no tienen conocimientos profundos del tema.

Desde mi punto de vista existen algunos frameworks de javascript que te ahorran todo el trabajo sucio y hacen que las peticiones ajax sean transparentes. En mi caso me gusta utilizar Jquery ya que es un potente framework en javascript que se ha convertido prácticamente en un estándar dentro del mundo del desarrollo web.

Si un usuario quiere aprender rápidamente a hacer peticiones ajax de un php a otro yo les mostraría el siguiente script que he hecho y está funcionando.

Código PHP:
<?php
session_start();
if ( isset($_POST['suma']) ) {
    $_SESSION['suma']++;
    echo $_SESSION['suma'];
    die;
} else {
    $_SESSION['suma'] = 0;
}
?>
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Prueba ajax</title>
    </head>
<body>

<p>Script que cuenta las veces que hemos hecho click en el botón</p>
<p>Guardamos el valor en una sesión php para hacer una prueba de ajax.</p>

<input type="button" id="_sumador" value="Haz click" />

<p>Hemos hecho click <strong id="suma"><?php echo $_SESSION['suma'] ?></strong> veces</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

function sumaAjax() {
    $('#_sumador').click(function(){
        $.ajax({
            type: 'POST',
            url: 'suma.php',
            data: {suma: 'true'},
            async: true,
            success: function(result){
                $('#suma').text(result);
            },
            error: function() {
                alert('error en peticion ajax');
            }
        });
    });
}
$(document).ready(function(){ 
    sumaAjax();
});
</script>

</body>
</html>
Está claro que tu trabajo explicando en el post ha sido muy bueno y más extenso, pero yo suelo decir que las cosas cuánto más sencillas son, mejor se entienden :)
Luego cada uno ya puede recomplicar su script a su manera.

Gracias por el aporte!!

Edito: me he olvidado decir que el script se llama a sí mismo suma.php ;)
Última edición por moriorGames; 26/12/2013 a las 02:07 Razón: Me olvidé una cosilla
  #10 (permalink)  
Antiguo 26/12/2013, 02:19
 
Fecha de Ingreso: mayo-2009
Ubicación: Japon
Mensajes: 60
Antigüedad: 15 años, 6 meses
Puntos: 12
Respuesta: introduccion sistemas dinamicos ( php + ajax )
Cita:
Iniciado por caricatos Ver Mensaje
No te parece que suena a "fanfarronería":
si sonó a fanfarronería me disculpo...


Cita:
Iniciado por caricatos Ver Mensaje
Todavía no he encontrado en las alternativas lograr el uso de Ajax de forma accesible, en cambio con la implementación de respuestas en formato xml sí... es más, a veces puede servir rutinas que se desarrollan para crear ficheros rss o sitemaps... aunque eso es otra cuestión...

Cita:
Iniciado por nksn Ver Mensaje
El único limite de ajax es la Imaginación...
Cita:
Iniciado por caricatos Ver Mensaje
Aunque en parte estoy de acuerdo, pero también veo que "entras en ese saco"
has un aporte y luego te critico...

no es por trolear pero ponte en el lugar de quienes intentan aprender, nadie nace sabiendo

no todos tienen un "nivel académico" como TU para comprender todo lo que se muestra en el código, pensando en esa gente intente ser lo mas simple posible, ponte en el lugar de los demás!

sobre todo, hice una aclaración...

Cita:
Iniciado por nksn Ver Mensaje
6 - existen mejores formas de implementar ajax, sin embargo, para que este aporte sea una aplicación "flexible", se hara un sacrificio en cuanto a optimisacion
  #11 (permalink)  
Antiguo 26/12/2013, 02:27
 
Fecha de Ingreso: mayo-2009
Ubicación: Japon
Mensajes: 60
Antigüedad: 15 años, 6 meses
Puntos: 12
Respuesta: introduccion sistemas dinamicos ( php + ajax )
moriorGames, gracias por responder

La verdad pensé en redactar con jQuery, pero lo vi muy superficial, por otro lado a mas de uno, les gustaría ver las entrañas de como se realiza la operación (creo), es simplemente un punto de vista ( = . = )
  #12 (permalink)  
Antiguo 26/12/2013, 02:52
Avatar de caricatos
Moderador
  
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Respuesta: introduccion sistemas dinamicos ( php + ajax )
Hola:

Cita:
Iniciado por nksn Ver Mensaje
...
no todos tienen un "nivel académico" como TU...
Ya empezamos... ...

No sé el nivel que tienen los demás, pero no pienso entrar en el saco y ponerme a fanfarronear de mi nivel, pero estoy dentro del equipo de moderación de este foro por mi ánimo de ayudar... a veces haciendo alguna crítica, y siento que te haya molestado, pero no voy a entrar en "el juego"...


Cita:
Iniciado por nksn Ver Mensaje
... has un aporte y luego te critico...
No me interesan las críticas si vienen de estas circunstancias... no pienso competir con nadie, pero ya que lo comentas, te remito a un viejo apunte de mi diario: Ajax, con X de XML.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #13 (permalink)  
Antiguo 26/12/2013, 03:18
 
Fecha de Ingreso: mayo-2009
Ubicación: Japon
Mensajes: 60
Antigüedad: 15 años, 6 meses
Puntos: 12
Respuesta: introduccion sistemas dinamicos ( php + ajax )
Cita:
Iniciado por caricatos Ver Mensaje
No te parece que suena a "fanfarronería":
Cita:
Iniciado por caricatos Ver Mensaje
Aunque en parte estoy de acuerdo, pero también veo que "entras en ese saco"
y luego ....

Cita:
Iniciado por caricatos Ver Mensaje
Ya empezamos... ...

No sé el nivel que tienen los demás, pero no pienso entrar en el saco y ponerme a fanfarronear de mi nivel, pero estoy dentro del equipo de moderación de este foro por mi ánimo de ayudar... a veces haciendo alguna crítica, y siento que te haya molestado, pero no voy a entrar en "el juego"...

DIOS! ¿quien te te entiende?

A mi punto de vista quien esta haciendo "fanfarroneado" y quien puso el "saco" en la mesa eres tu
  #14 (permalink)  
Antiguo 26/12/2013, 05:25
Avatar de moriorGames  
Fecha de Ingreso: diciembre-2013
Ubicación: Barcelona
Mensajes: 37
Antigüedad: 11 años
Puntos: 3
Respuesta: introduccion sistemas dinamicos ( php + ajax )
Cita:
Iniciado por nksn Ver Mensaje
moriorGames, gracias por responder

La verdad pensé en redactar con jQuery, pero lo vi muy superficial, por otro lado a mas de uno, les gustaría ver las entrañas de como se realiza la operación (creo), es simplemente un punto de vista ( = . = )
Si, si, estoy de acuerdo. Reconozco que has hecho un buen aporte y me has descubierto cosas que aún no sabía. En serio, yo creo que has hecho un buen tema. Pero si le tuviera que enseñar a hacer peticiones Ajax al becario de la empresa, empezaría por el script que he colgado yo.

Haces un buen trabajo arrojando luz a algunos asuntos que no siempre están claros.

__________________
Mi juego de estrategia medieval si lo entras hazme llegar tu opinión por favor, siempre la tengo en cuenta.
  #15 (permalink)  
Antiguo 26/12/2013, 17:22
Avatar de caricatos
Moderador
  
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Respuesta: introduccion sistemas dinamicos ( php + ajax )
Hola:

Cita:
Iniciado por moriorGames Ver Mensaje
...
Desde mi punto de vista existen algunos frameworks de javascript que te ahorran todo el trabajo sucio y hacen que las peticiones ajax sean transparentes. En mi caso me gusta utilizar Jquery ya que es un potente framework en javascript que se ha convertido prácticamente en un estándar dentro del mundo del desarrollo web.
...
¡Qué manía con las librerías...?

Una petición Ajax sin librerías no son más que cuatro o cinco líneas:

Crear el objeto,
Inicializarlo,
Hacer la petición,
Procesar la respuesta.

Cargar toda una librería, para algo que con unas pocas líneas obtienen igual resultado no creo que sea para aconsejar...

... Sobre la transparencia no estoy de acuerdo...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #16 (permalink)  
Antiguo 26/12/2013, 17:56
Avatar de guardarmicorreo  
Fecha de Ingreso: noviembre-2012
Ubicación: Córdoba
Mensajes: 1.153
Antigüedad: 12 años, 1 mes
Puntos: 84
Respuesta: introduccion sistemas dinamicos ( php + ajax )
El aporte me vendrá genial para adentrarme en AJAX, lo ansío aprender. Muchas GRACIAS!!!
__________________
Ayúdame a hacerlo por mi mismo.

Etiquetas: ajax, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 3 personas


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 01:48.