ajax html vs xml/json 응답 - 성능 또는 기타 이유

ajax html vs xml/json 응답 - 성능 또는 기타 이유

나는 상당히 아약스 무거운 사이트를 가지고 있고 아약스 요청에서 일부 3k HTML 형식의 페이지가 DOM에 삽입됩니다.

제가 하고 있는 일은 html 응답을 받아 jQuery를 사용하여 전체를 삽입하는 것입니다.

다른 옵션은 xml(또는 json)로 출력한 다음 문서를 구문 분석하여 페이지에 삽입하는 것입니다.

대부분의 큰 사이트는 json/xml 방식으로 작업을 수행하는 것으로 보입니다.Google Mail은 html 형식이 아닌 xml 형식을 반환합니다.

이것은 성능 때문입니까?아니면 단순히 html을 검색하는 것보다 xml/json을 사용하는 다른 이유가 있습니까?

자바스크립트 관점에서 직접 html을 주입하는 것이 가장 간단한 것 같습니다.jQuery에서 나는 그냥 이것을 합니다.

jQuery.ajax({
    type: "POST",
    url: "getpage.php",
    data: requestData,
    success: function(response) {
        jQuery('div#putItHear').html(response);
    }

xml/json 응답을 사용하면 해야 합니다.

jQuery.ajax({
    type: "POST",
    url: "getpage.php",
    data: requestData,
    success: function(xml) {
        $("message",xml).each(function(id) { 
            message = $("message",xml).get(id); 
            $("#messagewindow").prepend("<b>" + $("author",message).text() + 
            "</b>: " + $("text",message).text() + 
            "<br />"); 
        });
    }
});

코드 관점에서 볼 때 분명히 효율적이지 않으며, 더 나은 브라우저 성능을 기대할 수 없습니다. 그렇다면 왜 상황은 두 번째 방식일까요?

JSON/XML을 반환하면 HTML을 반환하는 것에 비해 응용프로그램에 더 많은 자유가 주어지며, 다른 분야(데이터 대 마크업)에 대한 특정 지식이 덜 필요합니다.

데이터는 여전히 데이터에 불과하기 때문에 클라이언트 측에 데이터를 표시하는 방법을 선택할 수 있습니다.이를 통해 서버 대신 클라이언트 측에서 많은 코드를 실행할 수 있습니다. 서버 측에서는 데이터 구조만 알고 마크업에 대해서는 아무것도 알면 됩니다.프로그래머가 알아야 할 모든 것은 데이터 구조를 전달하는 방법입니다.

클라이언트 구현은 서버에서 반환된 데이터 구조를 표시하는 방법만 알면 되며 이러한 구조가 실제로 어떻게 구축되는지에 대해서는 걱정할 필요가 없습니다.프로그래머가 알아야 할 모든 것은 데이터 구조를 표시하는 방법입니다.

다른 클라이언트를 빌드할 경우(HTML을 마크업 언어로 사용하지 않음), 모든 서버 구성요소를 재사용할 수 있습니다.다른 서버 구현을 구축할 때도 마찬가지입니다.

일반적으로 전송되는 데이터 양이 감소하므로 전송 속도가 향상됩니다.일반적으로 프로세스의 병목 현상이 발생하기 때문에 프로세스를 수행하는 데 걸리는 총 시간이 단축되어 사용자 환경이 개선됩니다.

HTML 대신 JSON/XML을 보내는 몇 가지 장점은 다음과 같습니다.

1. 데이터가 애플리케이션 외부에서 사용될 경우 HTML을 구문 분석하고 다른 구조에 맞추기가 더 어려울 수 있습니다.
2. 은 JSON에 포함될 수 있습니다.script AJAX 는 AJAX와 같습니다.
3. JSON/XML은 서버 측 스크립트와 뷰 간의 문제 분리를 유지합니다.
4. 대역폭 감소

당신은 JSON 데이터에서 HTML을 생성하기 위한 템플릿 툴인 Pure를 확인해야 합니다.

일반적으로 JSON은 XML의 동일한 데이터가 훨씬 크기 때문에 Ajax를 통해 데이터를 검색하는 더 효율적인 방법입니다.JSON은 또한 당신의 클라이언트 쪽 Javascript에 의해 더 쉽게 소비됩니다.하지만 순수한 HTML 콘텐츠를 찾는다면 당신의 제안대로 하겠습니다.하지만, 만약 당신이 정말로 필요하다면, 당신은 당신의 HTML 콘텐츠를 JSON 문자열에 포함시킬 수 있고 두 세계를 모두 활용할 수 있습니다.

저도 현재 이 결정과 씨름하고 있는데 다린이 어떻게 그것을 졸랐는지 보기 전까지는 별로 클릭하지 않았습니다.

"데이터가 애플리케이션 외부에서 사용될 경우 HTML을 구문 분석하고 다른 구조에 맞추기가 더 어려울 수 있습니다."

대부분 데이터가 어디로/어떻게 흘러가고 있는지에 대한 것이라고 생각합니다.다른 곳에서 데이터를 공유/전송할 필요가 없는 일회성 애플리케이션이라면 무게가 더 나가더라도 순수한 HTML을 뱉어내는 것은 괜찮습니다.

개인적으로, 자료에 싸여져야 할 복잡한 HTML이 있다면, 저는 그냥 HTML을 뱉어내고 떨어뜨립니다. jQuery는 달콤하고 모든 것이지만, Javascript로 HTML을 만드는 것은 종종 힘든 일입니다.하지만 이건 균형 게임입니다.

경우에 따라 AJAX 응답은 표시할 HTML보다 더 많은 정보를 반환해야 합니다.예를 들어, 검색에서 처음 20개 항목의 목록을 반환한다고 가정합니다.DOM의 다른 위치에 표시할 총 검색 결과 수를 반환해야 할 수도 있습니다.숨겨진 디브에서 총 카운트를 피기백할 수 있지만, 그러면 엉망이 될 수 있습니다.JSON을 사용하는 경우 총 카운트는 단순히 구조화된 JSON 반응의 필드 값이 될 수 있습니다.

저는 다음과 같이 요약합니다.

우리 중 많은 사람들이 서버 쪽의 성숙한 템플릿 엔진을 사용하는 것은 HTML을 생성하고 파이프 아래로 보내는 것보다 HTML 클라이언트 쪽의 자바스크립트 코드를 사용하는 것이 훨씬 적습니다.예, 자바스크립트를 위한 몇 가지 템플릿 엔진이 있습니다. 이 엔진은 현재 자바스크립트를 다소 완화시킬 수 있습니다.

저는 이미 모델, 로직 및 뷰 서버 측면을 분리하고 있기 때문에, 또 다른 분리를 갖는 것은 논쟁의 여지가 없습니다.JSON은 보기이고 HTML은 다른 보기입니다.

실제로 HTML/AJAX와 JSON/AJAX 모두 파이프 전체 페이지보다 몇 배 더 낫습니다.

마지막으로 생각해야 할 것은 검색 엔진에 친숙해지려면 HTML 서버 측면을 생성해야 한다는 것입니다.

저는 주로 콤비네이션을 합니다.클라이언트 측 논리가 있으면 JSON을 사용합니다. 그렇지 않으면 HTML을 사용합니다. 알림 및 자동 완성 특수 필드는 JSON을 통해 전송됩니다.

언급URL : https://stackoverflow.com/questions/1148266/ajax-html-vs-xml-json-responses-performance-or-other-reasons