Applicazione Web: combinazione del livello di visualizzazione tra PHP e Javascript-AJAX

1

Sto sviluppando applicazioni web utilizzando PHP con il framework CodeIgniter MVC con un'enorme necessità di funzionalità lato client in tempo reale. Questa è la prima volta che realizzo app su larga scala per client. Quindi combino il PHP con una grande quantità di moduli Javascript in un unico progetto.

Come già sapete, il framework MVC separa i moduli dell'applicazione in Model-View-Controller.

La mia preoccupazione riguarda il livello Visualizza.

Potrei visualizzare i dati sul DOM tramite il tag script PHP integrato caricando alcuni dati sul Controller. Altrimenti potrei usare AJAX per estrarre i dati - considerare il Controller come un servizio solo - e visualizzarli per Javascript.

Ecco alcune visualizzazioni

Potrei inserire i dati direttamente da Controller:

<label>Username</label> <input type="text" id="username" value="<?=$userData['username'];?>"><br />
<label>Date of birth</label> <input type="text" id="dob" value="<?=$userData['dob'];?>"><br />
<label>Address</label> <input type="text" id="address" value="<?=$userData['address'];?>">

O estraili usando AJAX:

$.ajax({
  type: "POST",
  url: config.indexURL + "user",                
  dataType: "json",
  success: function(data) { 
    $('#username').val(data.username);
    $('#dateOfBirth').val(data.dob);
    $('#address').val(data.address);
  }
});

Quindi, quale approccio è migliore per quanto riguarda la mia applicazione ha una complessa funzionalità lato client?

D'altra parte, PHP-CI ha un meccanismo predefinito per mettere i dati direttamente dal controller, quindi perché usare AJAX?

    
posta wlz 23.06.2014 - 06:39
fonte

2 risposte

2

Se hai intenzione di avere una quantità significativa di logica scritta sul lato client, allora considera di utilizzare la "separazione delle preoccupazioni" in stile MV [C] nel tuo codice JS sul lato client. Ad esempio, potresti avere una logica di "visualizzazione" JS che gestisce il rendering:

<script type="text/javascript">
function renderUser(user) {
  $('#username').val(user.username);
  $('#dateOfBirth').val(user.dob);
  $('#address').val(user.address);
}
</script>

Quindi definire una logica JS "controller" per passare i dati nella vista. Il design di questo dipende dall'uso previsto dell'applicazione - ad es. se "utente" viene visualizzato solo di rado, la logica del controller JS potrebbe essere simile a:

<script type="text/javascript">
function showUser() {
  $.ajax({
    type: "POST",
    url: config.indexURL + "user",                
    dataType: "json",
    success: function(data) {
      renderUser(data);
    }
  });
}
</script>

D'altro canto, se l'utente viene visualizzato su ogni richiesta di pagina, allora non è performante recuperare l'utente tramite AJAX - meglio includere i dati dell'utente come parte della richiesta iniziale della pagina. Puoi ancora utilizzare la stessa funzione di rendering:

<script type="text/javascript">
renderUser(<?php echo json_encode($userdata); ?>);
</script>

O se la tua applicazione web fornisce un elenco in tempo reale di nuovi account utente tramite socket web, puoi disegnarli su richiesta:

<script type="text/javascript">
var ws = new WebSocket("ws://localhost:9998/users");
ws.onmessage = function (evt) { 
    renderUser(evt.data);
};
</script>

Gli esempi sopra riportati sono grezzi ma, si spera, dimostrano la flessibilità che deriva dalla separazione di MVC in JS. Per una migliore discussione di questo argomento, consulta un tutorial su uno dei famosi framework JS MV * (Backbone, Angular, Ember, ecc.).

risposta data 23.10.2014 - 08:24
fonte
1

Puoi riferirti più dettagli su ajax. Ajax consente di rispondere alla richiesta dell'utente senza aggiornare l'intera pagina o andare a una nuova pagina. In alcune situazioni potrebbe avere una migliore esperienza utente per usare ajax. Per la tradizionale richiesta di post php, consente di portare l'utente ad un'altra pagina. Quindi, puoi applicare entrambi i modi nella base del tuo progetto in diverse situazioni.

    
risposta data 24.06.2014 - 19:12
fonte

Leggi altre domande sui tag