Najlepsze praktyki dotyczące zwracania i wyświetlania danych z wywołań AJAX

Question

Mam pewne ustawienia interakcji jquery/php na stronie. Przesyła ona niektóre dane do serwera i odzyskuje dane, które następnie są wyrównane na stronie w celu porównania i możliwych działań wykraczających poza to.

Moje pytanie brzmi: jaka jest najlepsza metoda zwracania informacji, a następnie jej wyświetlania?

• Return obiekt JSON, a następnie utworzyć html w locie z js i wyświetlaczem dane?
• Zwróć obiekt JSON, a następnie umieścił te dane w już utworzonych kontenerach dla danych na stronie?
• Zwróć czysty html z serwera i po prostu umieść to na stronie?

Przerzucałem je przez moją głowę wczoraj w nocy i nie mogłem się zorientować, czy jeden sposób byłby lepszy z jakiegoś konkretnego powodu.

Nie jestem guru js, więc nie byłam pewna, jakie są zalety/wady i zastrzeżenia do tych różnych metod.

Answer 1

Myślę, że kończy się w zależności od aplikacji.

Czysty HTML jest najłatwiejszy, po prostu wpadasz na miejsce i na altówkę. JQuery sprawia, że ​​dodawanie zdarzeń jest proste, a co nie.

Jednak zawsze, gdy korzystałem z AJAX, zawsze ewoluował w celu zwracania JSON i budowania elementów w locie. Jeśli na przykład zapełniasz drzewo, może stać się nieporządnym, aby uzyskać właściwe zagnieżdżenie. Zmusza to użytkownika do wykonywania kodu po stronie klienta, w którym to momencie po prostu używanie JSON od początku jest czystsze.

Ponadto, jeśli planujesz używać wywołań danych z innych stron, to używanie JSON jest rozwiązaniem, ponieważ HTML zostanie naprawiony.

Answer 2

Zwrot czystego HTML jest najlepszym rozwiązaniem. W większości przypadków gzip powinien neutralizować wszelkie różnice w przepustowości, a renderowanie za pośrednictwem javascript na kliencie może być powolne, jeśli klient jest błahostką. Wreszcie, pisanie javascript do renderowania HTML jest trudne do pracy w porównaniu do używania czegoś fajnego jak widok, jeśli używasz MVC.

Answer 3

To pojawił się niedawno i możliwe dupe: The AJAX response: Data (JSON, XML) or HTML snippet?.

Jeśli zamierzasz tworzyć HTML, możesz również zwrócić HTML bezpośrednio i wstrzyknąć go do DOM. Jednak czasami trzeba pracować z obiektami, w których JSON przydaje się.

Jeśli zwrócisz obiekt Person, na przykład, możesz powitać Person.Name i pokazać Person.Preferences, który jest naprawdę przydatny. To zależy od twojego projektu, ale ogólne zasady powinny być takie, aby HTML nie był w JavaScript, chyba że budujesz RIA.

Answer 4

Zależy to całkowicie od sposobu skonfigurowania aplikacji. Ja, na przykład, wolę zwracać JSON (drugie podejście na twojej liście), ponieważ mam parametr "kod błędu", który sprawdzam w funkcji onSukces przed aktualizacją treści na stronie, a jeśli nie jest zerowy, powiadamiam użytkownika błędu, w tym komunikat o błędzie, który powrócił z serwera (sprawdzanie poprawności po stronie serwera, limit czasu bazy danych itp.).

Answer 5

Użyłem wszystkich trzech i doszedłem do wniosku, że powracanie HTML jest lepsze przy wprowadzaniu nowych elementów do strony.

Moje doświadczenie polega na tym, że budując HTML za pomocą javascript, zazwyczaj replikuję pracę, która została już wykonana dla podróży użytkownika niebędącego javascript.

Nadal wolę analizować json w celu aktualizacji istniejących elementów lub tworzenia wyłącznie funkcji javascript. Mówię sobie to za przepustowość, ale myślę, że to dlatego, że kocham javascript.

Jako czwarty wariant, przeczytałem świetny post o tym, jak Flickr radzi sobie z ogromnymi ilościami danych z konkatinacją ciągów. Zasadniczo po prostu spróbuj wielkiej struny w dół rury i posiekaj ją na kliencie. Znacząco zmniejsza to na serwerze, przy marginalnym wzroście na kliencie.

Answer 6

z „możliwości działania poza tym” części pytania robi dużą różnicę. Jeśli potrzebujesz innych danych oprócz danych, powróć jako JSON to zdecydowanie lepsza opcja, ponieważ możesz pracować z danymi jako natywnym obiektem JavaScript zamiast przejść przez HTML DOM. Jeśli wszystko, co kiedykolwiek zamierzasz zrobić, to wyświetlaj to, nie widzę powodu, aby przezwyciężyć problem z budowaniem tego wyświetlania w JavaScript; po prostu zbuduj kod HTML w warstwie prezentacji na serwerze.

Answer 7

myślę tracisz doskonale poprawną opcję, jeden który używam często. To jest mój typowy schemat i to jeszcze do mnie nie ... :-)

Oto podstawowy szablon jQuery używam:

$(function() { 
    $.getJSON('/some/page',{foo:bar,bar:foo},function(json) { 
     if(json.outcome == 'success') { 
      $('body').prepend(json.html); 
     } else { 
      // Somehow let the user know why it didn't work 
      alert(json.error); 
     } 
    }); 
}); 

Oto podstawowe backend (PHP w moim przypadku) struktura używam :

<?php // Page: '/some/page' 

/* Blah Blah Blah... do whatever needs to be done... */ 

// If everything turns out okay (assuming '$output' is the HTML 
// you want to display... 
echo json_encode(array('outcome'=>'success','html'=>$output)); 

// If something goes wrong... just do: 
echo json_encode(array('outcome'=>'error','error'=>'Uh oh... something is broken')); 

Oczywiście, będziesz chciał dokładniej opisać swój błąd, umieszczając go w zmiennej lub coś podobnego. Ale powinieneś dostać ten pomysł. Ponadto, możesz dodać więcej informacji do wyjścia json. Możesz mieć trochę gotowego HTML, a także kilka innych informacji, takich jak "ogłoszenie o sukcesie" lub nowa nazwa klasy dla jakiegoś elementu, nie wiem ... cokolwiek ... możliwości są nieograniczone.

W każdym razie, z tego powodu wybieram tę trasę, ponieważ zazwyczaj jest to szybsze (w oparciu o moje doświadczenie) dołączanie gotowego kodu HTML do DOM zamiast pętli nad JSON i wstawianie elementów, chyba że jest to po prostu trochę tekst do zastąpienia w elemencie. Ale metoda, którą pokazałem, to IMO, najlepsze z obu światów. Możesz dołączyć HTML jako ciąg do jednej z właściwości JSON.

Happy jQuerying :-)