Globedia.com

×
×

Error de autenticación

Ha habido un problema a la hora de conectarse a la red social. Por favor intentalo de nuevo

Si el problema persiste, nos lo puedes decir AQUÍ

×
cross

Suscribete para recibir las noticias más relevantes

×
Recibir alertas

¿Quieres recibir una notificación por email cada vez que Miscapu escriba una noticia?

Aplicativo PHP & Ajax : Construyendo mi Primera Aplicación

26/12/2016 03:10 0 Comentarios Lectura: ( palabras)

Aquí comenzamos con nuestra primera aplicación usando las tecnologías PHP y Ajax. Este primer proyecto posee el siguiente proceso y los siguientes pasos:

  • Crearemos una simple aplicación con un " input " ó casilla de ingreso en formularios, en la que se le solicita al usuario que escriba su nombre y el servidor devuelve este nombre mientras el usuario vá escribiendo.
  • Mientras el usuario está escribiendo y el servidor esta siendo llamado asincrónicamente a intervalos regulares de una vez por segundo, para ver si reconoce el nombre actual; lo cual explica por qué no necesitamos un botón (como un botón 'Enviar') para notificar cuando estamos tipeando (Este método puede no ser apropiado para mecanismos reales de inicio de sesión pero es muy bueno para demostrar alguna funcionalidad de AJAX.)

    Demo

    Descargar Explicación del Código

    • Paso 1: Tenemos que saber que la aplicación consiste en estos 3 archivos :
    • index.html, que es el archivo inicial que el usuario solicita cuando ingresa al aplicativo web creado.
    • InicioRapido.js, es el archivo que contiene código JavaScript que se carga en el lado del cliente junto con index.html. Este archivo se encargará de realizar las solicitudes asíncronas al servidor, cuando estas sean necesaria para el uso del aplicativo.
    • InicioRapido.php, Este archivo contiene un script PHP que reside en el servidor, el cual es llamado mediante el código del archivo inicioRapido.js desde el lado del cliente.
    • Paso 2: Comencemos por la creación del archivo index.html:
    • Para la creación de este archivo hemos realizado la inclusión de los códigos de cabecera(Head) y cuerpo(Body) del HTML que son básicos y no voy a tocar en este capítulo.
    • Hemos adicionado un evento HTML dentro del cuerpo " body " de nuestro código del archivo index.html,
    • Este evento llamará a la función JavaScript llamada proceso que realizará la acción requerida de nuestro aplicativo web.
    • El input será de tipo text y tendrá un id llamado "minombre" el cual es un identificador que nos proporciona administración en nuestro aplicativo, ya veremos más adelante!
    • Para finalizar utilizamos la tag div la cual nos ofrece la posibilidad de posicionar objetos y el objeto aquí posicionado será justamente el ingresado en el input, que será nuestro nombre o el nombre que el usuario ingrese en el input!
    • Colocaremos un id llamado "divmensaje" que será el identificador del lugar donde posicionaremos a nuestro objeto que será el nombre ingresado en el input.

       <!<span > DOCTYPE  html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  >

      <<span >html xmlns = "http://www.w3.org/1999/xhtml" >

      <<span >head >

      <<span >title >AJAX con PHP: Inicio Rápido </<span >title >

      <<span >script type = "text/javascript" src = "quickstart.js" ></<span >script>

      </<span >head >

      <<span >body onload = 'process()' >

      El Servidor desea saber su nombre:

      <<span >input type = "text" id = "myName" />

      <<span >div id = "divMessage" />

      </<span >body >

      </<span >html >

      image

      • Paso 3: Creamos nuestro archivo "quickstart.js",
      • En este archivo vamos a crear una variable la cual almacenará la referencia al objeto " XMLHttpRequest " el cual es un objeto el cual nos ofrece una manera fácil de recuperar datos en una URL y puede ser usado para recuperar cualquier tipo de datos,
      • Para mayores informaciones te dejo este link donde podrás aprender más sobre este objeto muy importante dentro de la tecnologia Ajax! ¿Qué es XMLHttpRequest?

       var  xmlHttp  =  crearObjetoXMLHttpRequest();

      • Como podemos ver en el código hemos creado una variable xmlhttp que va a ser igual a "crearObjetoXMLHttpRequest()", lo cual quiere decir que la referencia a XMLHttpRequest es la función crearObjetoXMLHttpRequest.
      • Ahora vamos a recuperar el objeto XMLHttpRequest con esta función, veamos:

       // Almacenando la referencia al Objecto XMLHttpRequest 

      var xmlHttp = crearObjetoXmlHttpRequest();

      // Recuperando el objeto XMLHttpRequest

      function crearObjetoXmlHttpRequest ()

      {

      var xmlHttp;

      // Si está ejecutando Internet Explorer

      if (window.ActiveXObject)

      {

      try

      {

      xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" );

      }

      catch (e)

      {

      xmlHttp = false ;

      }

      }

      // Si está ejecutando Mozilla o otros navegadores

      else

      {

      try

      {

      xmlHttp = new XMLHttpRequest();

      }

      catch (e)

      {

      xmlHttp = false ;

      }

      }

      // Devolver el objeto creado o mostrar un mensaje de error

      if ( ! xmlHttp)

      alert( "Error al crear el Objeto XMLHttpRequest." );

      else

      return xmlHttp;

      }

      // Hacer la solicitud HTTP asincrónica utilizando el objeto XMLHttpRequest mediante la función "process"

      function process ()

      {

      // Proceda sólo si el objeto xmlHttp no está ocupado

      if (xmlHttp.readyState = = 4 || xmlHttp.readyState = = 0 )

      {

      // Recuperar el name escrito por el usuario en el "input"

      name = encodeURIComponent(document.getElementById( "myName" ). value );

      // Ejecutar la página inicioRapido.php desde el servidor

      xmlHttp. open ( "GET" , "quickstart.php?name=" + name , true );

      // Definiendo el método para manejar las respuestas del servidor

      xmlHttp.onreadystatechange = handleServerResponse;

      // Hacer que el servidor solicite las respuestas

      xmlHttp. send ( null );

      }

      else

      // Si la conexión está ocupada, vuelva a intentarlo después de un segundo

      setTimeout ( 'process()' , 1000 );

      }

      // Ejecutando automáticamente cuando se recibe un mensaje desde el servidor

      function handleServerResponse ()

      {

      // Avanzar sólo si la transacción ha finalizado

      if (xmlHttp.readyState = = 4 )

      {

      // Estado de 200 indica que la transacción se ha completado correctamente

      if (xmlHttp. status = = 200 )

      {

      // Extraer el XML recuperado del servidor

      xmlResponse = xmlHttp.responseXML;

      // Obtener el elemento del documento (el elemento raíz) de la estructura XML

      xmlDocumentElement = xmlResponse.documentElement;

      // Obtener el mensaje de texto, que está en el primer hijo de

      // el elemento del documento

      helloMessage = xmlDocumentElement. FirstChild . data ;

      // Actualizar la pantalla del cliente utilizando los datos recibidos desde el servidor

      document.getElementById( "divMessage" ).innerHTML =

      ' ' + helloMessage + '' ;

      // Reiniciar Secuencia

      setTimeout ( 'process()' , 1000 );

      }

      // Un estado HTTP diferente de 200 señala un error!

      else

      {

      alert( "Ocurrió un problema al accesar al servidor: " + xmlHttp.statusText);

      }

      }

      }

        Paso 4 : Creamos el archivo " quickstart.php ", el cual genera las salidas haciendo caso al servidor imprimiendo en pantalla los datos que a continuación detallo en el mismo código!
        • Además coloco pues 5 nombres de administradores que son Cristian, Miguel, Felipe, Gaspar y Elena;
        • entonces si usted coloca alguno de estos nombres el sistema devolverá lo siguiente:
        • Hola, Administrador y el nombre que hayamos elegido enter estos 5 nombres de administrador!
        • Bien ahora veamos nuestro código:

        <?php<br /> // Generando una salida XML 

        header ( 'Content-Type: text/xml' );

        // Generando una salida Header

        echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>' ;

        // creando el elemento

        echo '' ;

        // Devolviendo el nombre de usuario

        $name = $_GET [ 'name' ];

        // generando salida dependiendo del usuario administrador o usuario visitante

        $userNames = array ( 'CRISTIAN' , 'MIGUEL' , 'FELIPE' , 'GASPAR' , 'ELENA' );

        if ( in_array ( strtoupper ( $name ), $userNames ))

        echo 'Hola, Administrador ' . htmlentities ( $name ) . '!' ;

        else if ( trim ( $name ) == '' )

        echo 'Visitante, por favor ingrese su nombre!' ;

        else

        echo htmlspecialchars ( $name ) . ', Yo no te conozco!' ;

        // Cerrando el elemento

        echo '' ;

        ?>

        • Hagan sus preguntas y claro tambien no dejen de hacer sus críticas por favor!


        Sobre esta noticia

        Autor:
        Miscapu (19 noticias)
        Fuente:
        mysqliphp.blogspot.com.br
        Visitas:
        4197
        Tipo:
        Reportaje
        Licencia:
        Copyright autor
        ¿Problemas con esta noticia?
        ×
        Denunciar esta noticia por

        Denunciar

        Etiquetas

        Comentarios

        Aún no hay comentarios en esta noticia.