Come aggiornare ui vivace senza pagina di aggiornamento [chiuso]

1

Sto facendo un'applicazione web usando il framework struts2. Dopo il login dell'utente, mostro un dashboard sullo stato attuale dell'utente. Per mostrare l'interfaccia utente di Dashboard (JSP), ho usato per ottenere le informazioni dal back-end (Mysql). Durante il caricamento della pagina, avvio una richiesta, ad esempio "getDashboardInformation" (tramite Jquery Ajax) per ottenere le informazioni attuali del dashboard dell'utente e mostrare tali informazioni nell'interfaccia utente.

Quindi la richiesta si attiva solo al caricamento della pagina. Ora voglio attivare la richiesta ogni volta che le informazioni del dashboard dell'utente vengono aggiornate / inserite nella tabella mysql (relativa alla dashboard).

Ora come posso ottenere informazioni vivide sul cruscotto (ad es. cricinfo - i punteggi aggiornati automaticamente in ui) senza la necessità di aggiornare la pagina.

    
posta user3214145 07.09.2015 - 15:58
fonte

1 risposta

0

Puoi utilizzare Web Sockets per fare ciò, ma tieni presente che i Web Sockets sono una nuova tecnologia e in caso di supporto del browser potresti avere qualche problema.

I socket Web sono una sorta di ascoltatori di eventi. Sono in attesa di eventi dal server come socket.onopen -event.

Quindi puoi fare quanto segue per ottenere questo risultato sul lato client:

All'inizio c'è la funzione che gestisce i dati di risposta ...

function handleResponseData(data) {
    // data could be JSON string for example
    alert(data);
}

Quindi crei la versione del socket Web per la gestione dei dati ...

function doSocket() {
    socket = new WebSocket("ws://echo.websocket.org/");
    socket.onmessage = function(event) {
        handleResponseData(event.data);
    }
}

E poi la versione alternativa ...

function doAlternative() {
    window.setInterval(function() {
        var xmlhttp;

        if(window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange=function() {
            if(xmlhttp.readyState==4 && xmlhttp.status==200 &&
                // Also check if server responded with data:
                xmlhttp.responseText)
            {
                handleResponseData(xmlhttp.responseText);
            }
        }

        xmlhttp.open("GET","echo.websocket.org",true);
        xmlhttp.send();
    }, 2000);
}

L'unica cosa che rimane da fare è verificare se i socket Web sono supportati e per eseguire la funzione appropriata ...

function initialize() {
    if(typeof(WebSocket) == "function") {
        doSocket();
    }
    else {
        doAlternative();
    }
}

window.addEventListener("load", initialize, false);

Con questo codice sul lato client, ora sei in grado di gestire aggiornamenti periodici. Ma è importante notare che finché si eseguono entrambe le versioni, sono necessari due meccanismi sul lato server per gestire questo:

  1. Un socket che invia periodicamente aggiornamenti al client e
  2. Un servlet che gestisce le richieste inviate nella funzione intervallo.

Infine, puoi ottenere ulteriori informazioni sui socket Web qui .

    
risposta data 07.09.2015 - 18:42
fonte

Leggi altre domande sui tag