Eine Seite über Ajax in Div Best Practice laden?

Ich verwende die folgende Methode, um eine Remote-Seite in ein div, das ich auf der Seite habe, zu laden.Eine Seite über Ajax in Div Best Practice laden?

Ich bin neugierig, ist es eine schlechte Praxis, eine vollständig formatierte HTML-Seite innerhalb einer anderen Seite zu laden? Mein Anliegen ist mehr zum Laden von CSS oder zusätzlichen Javascript-Includes, die andere Elemente auf der primären Seite möglicherweise überschreiben.

Ich habe keine Probleme während meiner ersten Tests erlebt, ich bin nur nicht sicher, ob dies die beste Praxis ist.

Zur Klarstellung: Wenn ich eine primäre Seite wie so

<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>

Und results.html Code, der wie folgt aussieht:

<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>

Wird die CSS und JS überschreiben sich gegenseitig, oder wird die Seiten funktionieren als 2 getrennte Einheiten?

Quelle

2013-03-26 TheJason

ich, dass die 'annehmen würde .html' Sie' load() 'in eine 'div' ist einer" partialView "ähnlich, die nur partiellen HTML enthält und dass alle relevanten CSS und JavaScript bereits in der Hauptdatei' .html' vorhanden sind. Oder wie in [** jivings **] (http://stackoverflow.com/users/334274/jivings) angegeben, antworten Sie nur auf einen Teil der Seite. Wenn Sie sich entscheiden, eine komplette HTML-Seite einschließlich '' zu laden, würde das nicht zu ungültigem HTML führen? – Nope

Sie überschreiben sich gegenseitig, results.html wird Teil Ihrer ursprünglichen Seite, es wird nicht ihre eigene Seite sein. Die Tags html/head/body werden entfernt und hinterlassen ihre Kinder. –

@KevinB: +1 Schön. Zumindest würde ungültiges HTML erledigt werden. Gut zu wissen, dass die relevanten Tags entfernt wurden. – Nope

Dies funktioniert gut und der Browser wird es richtig behandeln. Vom jQuery docs:

... Browsern oft Elemente filtern aus dem Dokument wie <html>, <title> oder <head> Elemente. Daher sind die Elemente , die von .load() abgerufen werden, möglicherweise nicht genau dieselben, als wenn das Dokument direkt vom Browser abgerufen wurde.

Allerdings ist es wahrscheinlich besser, Praxis das Element in der zurückgegebenen HTML angeben, die Sie einfügen möchten:

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

Quelle

2013-03-26 21:12:17 Jivings

+1 für die Empfehlung, um spezifisch zu sein. Sätze wie: 'Browser filtern oft Elemente..' scheinen nicht dafür zu sorgen, dass der Browser das 100% macht. – Nope

@ FrançoisWahl Genau, viel besser, um sicher zu sein, dass Sie einfügen, was Sie wollen. – Jivings

+1, aber wenn das Poster die Seite ändern kann, die er auf der Serverseite lädt, ist das wahrscheinlich ein besserer Weg. Siehe meine Antwort. – undefined

Ok, vielleicht sollte ich bei DevTools einen Blick gerade aufgenommen haben, bevor ich das gefragt Frage.

Nachdem ich den Element Inspector gelesen habe, sehe ich jetzt (zumindest in Chrome), dass der Browser die HTML-, HEAD- und Body-Tags entfernt. Es entfernt auch das zusätzliche jquery-Include. Allerdings macht es die

<script>my js functions here</script>

verlassen Obwohl ich verstehe, dass ich nicht vertrauen kann, dass alle Browser so effizient sein wird, zumindest jetzt ich habe das Licht gesehen.

Quelle

2013-03-26 21:40:40 TheJason

Ich stimme zu, dass es "gut" funktionieren sollte. Berücksichtigen Sie jedoch den zusätzlichen Overhead, den Sie schaffen, der eliminiert werden könnte, indem Sie nur den Inhalt zurückgeben, den Sie vom Server benötigen. Sie treffen möglicherweise die Datenbank, um Daten abzurufen, die in den Teilen der Seite gerendert werden, die Sie verwerfen. Sie können beispielsweise Informationen zum Benutzer oben auf jeder Seite anzeigen. Oder Sie suchen nach anderen Informationen, die in Ihre Seite Meta-Tags in den Kopf gehen. Sie haben wahrscheinlich eine Art von Server-Templates, um diese überschüssigen Teile der Seite zu erstellen. Dann setzen Sie diesen überschüssigen Inhalt in eine Antwort, senden sie über eine Leitung, dann bitten Sie den Browser, ihn zu parsen, HTML-Elemente daraus zu erstellen, und entfernen Sie dann die Teile, die für Sie nicht erwünscht sind.

Dies ist vielleicht keine große Sache.Es hängt davon ab, wie viel Verkehr Sie erhalten, wie viel zusätzliche Arbeit der Server zum Rendern der ganzen Seite unternimmt, wie viel von der Last der Server ist und wie viel Zeit/Geld/Mannstärke Sie haben und wie viel es kosten würde in der Lage sein, stattdessen eine getrimmte Antwort zu senden. Wenn es sich um ein kleines Projekt mit wenig Verkehr handelt, lohnt es sich nicht, es zu ändern. Aber es ist wahrscheinlich auch eine leichte Änderung zu machen. Und da es sich bei der Frage um eine Best Practice handelt, würde ich nein sagen. Das Laden einer ganzen Seite, um nur einen Teil der Seite zu rendern, ist keine Best Practice. Die beste Vorgehensweise besteht darin, genau das zurückzugeben, was Sie vom Server benötigen, und alles zu verwenden, um die Seite zu aktualisieren. Dies könnte vorgerenderter HTML sein oder es könnte JSON sein, aber das ist eine andere Diskussion überhaupt. ?

Eine triviale Lösung in PHP könnte so einfach wie die folgenden, mit format = Ajax in der Abfrage-String sein:

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

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

render_results(); 

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

Quelle

2013-03-26 22:18:18 undefined

Eine Seite über Ajax in Div Best Practice laden?

Antwort

Verwandte Themen