Ładowanie strony przez Ajax do Div Najlepsze praktyki?

Używam poniższej metody do załadowania strony zdalnej do elementu div, który mam na stronie.Ładowanie strony przez Ajax do Div Najlepsze praktyki?

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

Jestem ciekawa, czy źle jest załadować całkowicie sformatowaną stronę HTML na inną stronę? Moje obawy dotyczą raczej ładowania css lub dodatkowych javascript, które mogą nadpisywać inne elementy na stronie głównej.

Podczas pierwszych testów nie doświadczyłem żadnych problemów, po prostu nie jestem pewien, czy to najlepsza praktyka.

do wyjaśnienia: Jeśli mam podstawową stronę jak tak

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

I results.html kodu, który wygląda tak:

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

będzie CSS i JS nadpisać siebie, czy będzie strony funkcjonują jako 2 oddzielne podmioty?

Źródło

2013-03-26 TheJason

Przypuszczam, że '' .html' ty load() 'w 'div' jest podobne do" partialView "zawierającego tylko częściowy HTML i że wszystkie istotne CSS i JavaScript już istnieją w głównym pliku' .html'. Lub, jak stwierdzono w [** jivings **] (http://stackoverflow.com/users/334274/jivings) odpowiedzieć tylko cel części strony. Jeśli zdecydujesz się załadować kompletną stronę HTML zawierającą "", czy nie spowoduje to nieprawidłowego kodu HTML? – Nope

Będą nadpisywać się wzajemnie, results.html stanie się częścią oryginalnej strony, nie będzie to własna strona. znaczniki html/head/body zostaną usunięte, pozostawiając ich dzieci. –

@KevinB: +1 Nice. Przynajmniej nieważny HTML byłby załatwiony. Dobrze wiedzieć, że odpowiednie znaczniki zostały usunięte. – Nope

To zadziała dobrze, a przeglądarka poradzi sobie z tym poprawnie. Z jQuery docs:

... przeglądarek często filtrować elementy z dokumentu takie jak <html>, <title> lub <head> elementy. W rezultacie elementy pobierane przez .load() mogą nie być dokładnie takie same, jak gdyby dokument był pobierany bezpośrednio przez przeglądarkę.

Jednak to chyba lepiej praktyka, aby określić element zwróconej HTML, który chcesz wstawić:

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

Źródło

2013-03-26 21:12:17 Jivings

+1, aby zalecenie było konkretne. Zdania typu: 'przeglądarki często filtrują elementy.' 'Nie wydają się zapewniać, że przeglądarka zrobi to w 100%. – Nope

@ FrançoisWahl Dokładnie, o wiele lepiej, aby mieć pewność, że wstawiasz to, co chcesz. – Jivings

+1, ale jeśli plakat może modyfikować stronę, którą ładuje po stronie serwera, jest to prawdopodobnie lepszy sposób. Zobacz moją odpowiedź. – undefined

Ok, więc może powinienem po prostu wzięty do obejrzenia DevTools przed Poprosiłem pytanie.

Po przejrzeniu Inspektora elementów widzę teraz (przynajmniej w Chrome), że przeglądarka usuwa znaczniki HTML, HEAD i Body. Usuwa również dodatkowe jquery. Jednak to nie pozostawiać

<script>my js functions here</script>

Chociaż rozumiem, że nie można ufać, że wszystkie przeglądarki będą tak skuteczne, przynajmniej teraz widziałem światło.

Źródło

2013-03-26 21:40:40 TheJason

Zgadzam się, że "powinno" zadziałać prawidłowo ". Weź jednak pod uwagę dodatkowy nadmiar, który można wyeliminować, zwracając jedynie zawartość potrzebną na serwerze. Być może trafiasz do bazy danych, aby pobrać dane wyrenderowane w częściach strony, które odrzucasz. Na przykład możesz wyświetlać informacje o użytkowniku u góry każdej strony. Możesz też wyszukiwać inne informacje, które trafiają do metatagów strony w głowie. Prawdopodobnie masz jakiś typ szablonów po stronie serwera, aby utworzyć te nadmiarowe części strony. Następnie umieszczasz nadmiarową treść w odpowiedzi, przesyłając ją przez przewód, a następnie prosząc przeglądarkę, aby przeanalizowała go, utworzyła z niego elementy HTML, a następnie usun części, które nie są dla ciebie potrzebne.

To może nie być wielka sprawa.To zależy od tego, ile ruchu dostaniesz, ile dodatkowej pracy serwer robi, aby wyświetlić pełną stronę, ile obciążenia serwera jest pod, i ile czasu/pieniędzy/mocy człowieka masz w porównaniu do tego, ile by to zajęło aby wysłać zamiast tego odpowiedź przyciętą w dół. Jeśli jest to mały projekt, przy małym natężeniu ruchu, może nie warto go zmieniać. Ale jest to również prawdopodobnie łatwa zmiana. A ponieważ pytanie dotyczy najlepszej praktyki, powiedziałbym "nie", ładowanie całej strony, aby uczynić tylko część strony, a nie najlepszą praktykę. Najlepszą praktyką jest zwrócenie tylko tego, czego potrzebujesz z serwera i użycie go do aktualizacji strony. Może to być wcześniej renderowany HTML lub może to być JSON, ale to już zupełnie inna dyskusja.

Trywialny rozwiązanie w PHP może być tak proste, jak poniżej, stosując format = ajax w ciągu zapytania:

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

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

render_results(); 

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

Źródło

2013-03-26 22:18:18 undefined

Ładowanie strony przez Ajax do Div Najlepsze praktyki?

Odpowiedz

Powiązane problemy