Caricamento di una pagina tramite Ajax in Div Best Practice?

Sto usando il metodo qui sotto per caricare una pagina remota in un div che ho sulla pagina.Caricamento di una pagina tramite Ajax in Div Best Practice?

$('#result').load('www.myurl.com/results.html');

Sono curioso, è una cattiva pratica caricare una pagina HTML interamente formattata in un'altra pagina? La mia preoccupazione è più verso il caricamento di CSS o include javascript aggiuntivi che potrebbero sovrascrivere altri elementi nella pagina principale.

Non ho riscontrato alcun problema durante i miei test iniziali, non sono sicuro se questa è la procedura migliore.

Per chiarire: Se ho una pagina principale in questo modo

<html> 
    <head> 
     <script src="jquery.js"></script> 
     <link href="mycss.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
     <div id="remoteContainer"></div> 
     <script> 
      $('#remoteContainer').load('www.myurl.com/results.html'); 
     </script> 
    </body>

E results.html codice che assomiglia a questo:

<html> 
    <head> 
     <script src="jquery.js"></script> 
     <link href="myResults.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
     <header>   
      <h1>My Results Page</h1> 
     </header> 
     ... 
    </body>

Sarà il CSS e JS sovrascrivere l'un l'altro, o volontà le pagine funzionano come entità separate da 2?

fonte

2013-03-26 TheJason

Parto dal presupposto che il .html' si 'load()' 'in un 'div'è un simile a" partialView "che contiene solo HTML parziale e che tutti i file CSS e JavaScript rilevanti esistono già nel file principale .html'. Oppure, come indicato in [** jivings **] (http://stackoverflow.com/users/334274/jivings), rispondi solo alla parte target della pagina. Se decidi di caricare una pagina HTML completa che includa "" non risulterebbe un codice HTML non valido? – Nope

Esse si sovrascriveranno, results.html diventerà parte della pagina originale, non sarà la sua pagina. i tag html/head/body verranno rimossi, lasciando i loro figli. –

@KevinB: +1 Nizza. Almeno HTML non valido sarebbe stato curato. Buono a sapersi che i tag rilevanti sono stati rimossi. – Nope

Questo funzionerà correttamente e il browser lo gestirà correttamente. Dal jQuery docs:

... browser spesso filtrano elementi dal documento quali <html>, <title> o <head> elementi. Di conseguenza, gli elementi recuperati da .load() potrebbero non essere esattamente la stessa cosa se il documento fosse stato richiamato direttamente dal browser.

Tuttavia, è probabilmente meglio pratica per specificare l'elemento nel codice HTML restituita che si desidera inserire:

$('#remoteContainer').load('www.myurl.com/results.html #containerDiv');

fonte

2013-03-26 21:12:17 Jivings

+1 per la raccomandazione specifica. Frasi come: 'I browser spesso filtrano gli elementi ... 'non sembrano garantire che il browser lo faccia al 100%. – Nope

@ FrançoisWahl Esattamente, è molto meglio essere sicuri di inserire quello che vuoi. – Jivings

+1, ma se il poster può modificare la pagina che sta caricando sul lato server, probabilmente è un modo migliore di andare. Vedi la mia risposta. – undefined

Ok, forse avrei dovuto appena dato un'occhiata a DevTools prima che ho chiesto al domanda.

Dopo aver esaminato l'Ispettore Elementi, ora vedo (almeno in Chrome) che il browser rimuove i tag HTML, HEAD e Body. Rimuove anche l'aggiunta jquery aggiuntiva. Tuttavia lo fa lasciare il

<script>my js functions here</script>

Anche se capisco che non posso fiducia che tutti i browser saranno più efficiente, almeno ora che ho visto la luce.

fonte

2013-03-26 21:40:40 TheJason

Sono d'accordo che "dovrebbe" funzionare "bene". Ma considera il sovraccarico extra che stai creando che potrebbe essere eliminato restituendo solo il contenuto di cui hai bisogno dal server. È possibile che si stia colpendo il database per recuperare i dati resi nelle parti della pagina che si stanno ignorando. Ad esempio, potresti avere informazioni sull'utente visualizzato nella parte superiore di ogni pagina. Oppure potresti cercare altre informazioni che entrano nei tuoi meta tag della pagina in testa. Probabilmente hai un qualche tipo di modellazione lato server in corso per creare queste parti in eccesso della pagina. Quindi stai mettendo questo contenuto in eccesso in una risposta, inviandolo su un filo, quindi chiedendo al browser di analizzarlo, creare elementi html, quindi rimuovere le parti che non sono desiderate per te.

Questo potrebbe non essere un grosso problema.Dipende da quanto traffico ottieni, quanto lavoro extra il server sta facendo per rendere l'intera pagina, quanta parte del carico è sotto il server, e quanto tempo/denaro/potere umano hai contro quanto ci vorrebbe per essere in grado di inviare invece una risposta ridotta. Se si tratta di un piccolo progetto, con traffico leggero, potrebbe non valere la pena di cambiare. Ma probabilmente è anche un cambiamento facile da fare. E poiché la domanda riguarda una buona pratica, direi di no, caricando una pagina intera per rendere solo una parte della pagina non una best practice. La procedura migliore consiste nel restituire solo ciò che è necessario dal server e utilizzarlo per aggiornare la pagina. Questo potrebbe essere HTML pre-renderizzato o potrebbe essere JSON, ma questa è un'altra discussione.

Una soluzione banale in PHP potrebbe essere semplice come il seguente, utilizzando format = ajax nella stringa di query:?

<?php 
$ajax = $_GET['format'] == 'ajax'; 

if (!$ajax) { 
    render_head_and_stuff(); 
} 

render_results(); 

if (!$ajax) { 
    render_footer_and_stuff(); 
}

fonte

2013-03-26 22:18:18 undefined

Caricamento di una pagina tramite Ajax in Div Best Practice?

risposta

Problemi correlati