0

¡Hola! Bueno, tengo este codigo:

<main>
       <div class="main-container">
           
        <?php

        include("conexion.php");
        
        $usuario = $_GET['username'];
        if ($_SESSION['gratuito'] == $usuario || $_SESSION['exclusivo'] == $usuario || $_SESSION['admin'] == $usuario || $_SESSION['creador'] == $usuario) {

           ?>
           <a href="eliminar-notif.php?username=<?php echo "$usuario"?>">Eliminar todas las notificaciones.</a>
           <?php

        $query = mysqli_query($conn, "SELECT * FROM notificaciones WHERE usuario = '$usuario' ORDER BY id DESC");

        while ($row = mysqli_fetch_array($query)) {
            $titulo = $row['titulo'];
            $texto = $row['texto'];
            $tipo = $row['tipo'];
            $id = $row['id'];
            ?>
            <div class="box">
                <h2 class="h2-notif"><?php echo "$titulo" ?></h2>
                <p class="p-notif"><?php echo "$texto" ?></p><br>
            </div>
            <?php
                if ($tipo == 1) {
                    ?>
                    <form action="aceptar-invitacion.php?id=<?php echo "$id" ?>" method="POST">
                    <div class="btn-container">
                    <input class="aceptar" type="submit" name="aceptar" value="ACEPTAR">
                    </div>
                    <div class="btn-container">
                    <input class="rechazar" type="submit" name="rechazar" value="RECHAZAR">
                    </div>
                    <input type="text" value="<?php echo "$usuario" ?>" class="no-mostrar" name="usuario">
                    </form>
                    <?php
                }
        }
            $leido = mysqli_query($conn, "UPDATE notificaciones SET leer = '1' WHERE usuario = '$usuario'");
?>
            <?php
        } else {
            ?>
            <h2 class="h2-notif">TEXTO</h2>
            <?php
        }
        ?>
       </div>
       <?php
       include("aceptar-invitacion.php");
        ?>
    </main>

Mi base de datos de Notificaciones:

  • id
  • tipo
  • titulo
  • texto
  • desde
  • usuario (el receptor de la notificacion)
  • leer (Fecha no es necesaria para lo que hago)

Bueno, basicamente, me gustaria actualizar el while en tiempo real, con tal de que las nuevas notificaciones aparezcan en cuanto se recibe una, se que esto se puede hacer con AJAX, pero solo encuentro tutoriales de Jquery (cosa que no uso, no me gustan las librerias externas) y el unico que encontre sin este no me funciono no se porque razon.

Por lo que tengo entendido debo crear otra pagina, llamada (por ejemplo) "noti-vivo.php" y ahi colocar el while, y mediante una funcion javascript llamar para que el div (posiblemente cree un nuevo div para mantener dentro del while) con el id "notificacion" imprima lo que hay en la pagina noti-vivo.php cada cierto tiempo.

El problema es que no conozco como crear esta funcion, no se nada de AJAX, probe con lo siguiente que vi en un tutorial:

<script type="text/javascript">
          function ajax(){
              var req = new XMLHttpRequest();
              
              req.onreadystatechange = function(){
                  if (req.readyState == 4 && req.status == 200) {
                    document.getElementById('noti-vivo').innerHTML = req.responseText;
                  }
              }
              req.open('GET', 'notificacion.php', true);
              req.send();
          }
          setInterval(function(){ajax();}, 1000);
      </script>

//donde empieza el body llamo a la funcion
<body onload="ajax();">

notificacion.php es la otra pagina que recoge los datos de la base de datos, pero, por alguna razon, no funciono, supongo que es porque esta desactualizado (2017).

btw, por favor, no critiquen mi codigo, es super amateur y es solamente para aprendizaje, eviten hacer comentarios con respecto a este, solo respondan mi pregunta por favor.

¡Gracias por la ayuda que puedan brindarme!

5
  • Oh genial, por favor me explicas como usar eso? o que es? porque lei un poco sobre algunas menciones, pero no se nada Commented el 20 sept. 2020 a las 23:36
  • ademas, (por lo que se) los websockets son varios (no es uno unico tipo Jquery, AJAX, bootstrap, etc), cual me recomendarias usar? Commented el 20 sept. 2020 a las 23:39
  • ¡Genial! Muchas gracias, vere el video y te informare si funciona o es lo que busco Commented el 20 sept. 2020 a las 23:40
  • igual esperare una respuesta tambien de otros usuarios en caso de que puedan solucionar mi problema y lo vea mas conveniente Commented el 20 sept. 2020 a las 23:55
  • hmm, viendo los websockets creo que me ahorrare a usarlos, me obligaria a cambiar muchas cosas y aprender algo nuevo para el codigo y ya estoy muy sobrecargado en eso, sin embargo lo dejare para despues, suponiendo que es la opcion mas conveniente para hacer lo que quiero hacer Commented el 21 sept. 2020 a las 0:01

1 respuesta 1

2

Esta es una respuesta muy poco ortodoxa pero te puede servir como ejemplo de cómo hacer una clase para manejar solicitudes ajax.
Cuando estudie el tema por primera vez la hice como ejercicio. Y, es funcional para recibir respuestas en texto plano desde el servidor (json es también texto plano) Te la presento para que la estudies y hagas los cambios que necesites:

/*/ variable global para identificar el elemento en que
se quiere insertar y mostrar ra respuesta del servidor /*/
var ajax_objetivo = '';

/*/ Bloque de definicion 
  de objeto llamador AJAX
  OBJETO PARA ENCAPSULAR LLAMADOS AJAX SIN
  CONFLICTOS DE ESPACIO DE NOMBRES /*/
var llamadorAJAX = new Object();

// Le asigno las constantes controladores de estado y estatus
llamadorAJAX.READY_STATE_UNINITIALIZED = 0;
llamadorAJAX.READY_STATE_LOADING = 1;
llamadorAJAX.READY_STATE_LOADED = 2;
llamadorAJAX.READY_STATE_INTERACTIVE = 3;
llamadorAJAX.READY_STATE_COMPLETE = 4;
// Estatus de la respuesta del servidor
llamadorAJAX.LOAD_STATUS_SUCCESS = 200;
/*/ metodo constructor /*/
llamadorAJAX.CargadordeContenidos = function(url, metodo, OnloadcallBack, OnErrorCallBack, data, encodeProtocol) {
    this.url = url;
    this.xhr = null; // objeto request, no me queda claro por que se espera al prototipo para inicializarlo
    this.method = (metodo) ? metodo : "GET";
    if (encodeProtocol){
        this.encodeProtocol = encodeProtocol;
    }else{
        if(this.method=="POST"){
            this.encodeProtocol = "application/x-www-form-urlencoded";
        }else{
            this.encodeProtocol = null;
        }
    } 
    this.data = (data) ? data : null;
    this.onload = OnloadcallBack;
    this.onerror = (OnErrorCallBack) ? OnErrorCallBack : this.defaultError;
    this.cargaContenidoAJAX(url);
} 

llamadorAJAX.CargadordeContenidos.prototype = {
    cargaContenidoAJAX: function(url) {
        if(window.XMLHttpRequest){
            this.xhr = new XMLHttpRequest();
        }else{
            if(window.ActiveXObject) {
                this.xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        if(this.xhr){
            try{
                var loader = this;
                this.xhr.onreadystatechange = function() {
                    loader.onReadyState.call(loader);
                }
                this.xhr.open(this.method, url, true);
                // si el metodo es POST es necesario que encodeprotocol se haya establecido
                if (this.encodeProtocol){
                    this.xhr.setRequestHeader("Content-Type", this.encodeProtocol);
                }
                this.xhr.send(this.data);
            }catch(err){
                this.onerror.call(this);
            }        
        }
    },
    onReadyState: function() {
        var xhr = this.xhr;
        var ready = xhr.readyState;
        // interesa atrapar estado complete
        if (ready==llamadorAJAX.READY_STATE_COMPLETE){
            var httpStatus = xhr.status;
            // verifica la condicion del resultado
            if ((httpStatus == llamadorAJAX.LOAD_STATUS_SUCCESS) || (httpStatus == 0)){
                this.onload.call(this);
            }else{
                this.onerror.call(this);
            }
        }
    },
    defaultError: function() {
        alert("Se ha producido un error al obtener los datos"
            + "\n\nreadyState:" + this.req.readyState
            + "\nstatus: " + this.xhr.status
            + "\nheaders: " + this.xhr.getAllResponseHeaders());
    }
}
/*/ FIN Bloque de definición /*/

Para usarlo (es totalmente funcional) hace algunos años lo usaba intensivamente en todos mis proyectos basta con:

  1. Escribir una función que resolverá la respuesta en caso de success y recibe como parámetro el bloque devuelto por el servidor retrollamado_si_funciona().
  2. Escribir una función que notifique fallos retrollamado_notificar_error().
  3. Decidir a qué dirección url se enviará la solicitud, empacar los datos para post e invocar así:
var ajaxRequest = new llamadorAJAX.CargadordeContenidos(url, "POST", retrollamado_si_funciona, retrollamado_notificar_error, data);

Edidión complementaria
Tratamiento de la respuesta del servidor:

function retrollamado_si_funciona(){
    // Recoger la respuesta del servidor como texto
    var respuesta = '' + this.xhr.responseText;
    // hacer lo que se quiera con el texto si fuese json basta con hacerle parse
    // ...
}
12
  • ¡Muchisimas gracias! esto es EXACTAMENTE lo que buscaba, nada complicado, para aprender y entender, ya te informo si funciona. Commented el 21 sept. 2020 a las 0:25
  • @SilviaManquis Estoy seguro de que funciona. Todavía lo tengo en producción en un servidor local en que conservo "mi historia de aprendizaje".
    – quevedo
    Commented el 21 sept. 2020 a las 0:29
  • Te adoro jaja, ya puse que es la respuesta, perfecta para gente nueva Commented el 21 sept. 2020 a las 0:30
  • Bien, mas o menos comprendo lo que tiene, pero como lo aplico? es decir, este codigo, lo aplico creando un archivo nuevo llamado (no se, por ejemplo) ajax.js y luego pongo un stylesheet para llamarlo a la pagina que quiero? Commented el 21 sept. 2020 a las 0:33
  • Fácil: creas un par de metodos: uno para tratar lo que te devuelva el servidor y otro para notificar errores. Puedes armar un tercero para organizar la data
    – quevedo
    Commented el 21 sept. 2020 a las 0:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.