JSON 템플릿이 AJAX를 통해 콘텐츠를 로드하고 성능을 향상하는 데 도움이 됩니까?[닫은]

StackOverflow https://stackoverflow.com//questions/20049436

문제

우리는 트위터 계정 아래에 있는 트위터 설정 패널과 매우 유사한 동적 대시보드를 작업 중입니다. 대시보드에는 많은 제어 기능이 있으므로 많은 콘텐츠가 동적으로 채워집니다. 따라서 현재는 이것이 우리가 수행하는 방법입니다.

이것은 내 왼쪽 패널에 있는 메뉴 중 하나입니다.

<a href="javascript:void(0);" onclick="fnGetFiles();">Files</a>

이것은 HTML을 가져오는 함수입니다.

function fnGetFiles(){
  $('#mainDashboard').html('<div class="rightContainer"><div class="tabLoader"></div></div><div class="clear"></div>');
  $.get(USER_DASHBOARD+'file_share/files.php',function(data){
  $('#mainDashboard').html(data);
});

그래서 기본적으로 HTML을 직접 첨부(append)합니다. 그런데 트위터 대시보드를 통해서 그냥 넘어갔습니다. enter image description here
첫 번째는 왼쪽의 다양한 메뉴 간을 탐색하기 위해 수행하는 URL 처리입니다(참조용 이미지 추가). 즉석에서 변경되고 콘텐츠가 로드됩니다.켜기 검사 내가 본 코드는 HTML을 JSON 문자열로 보내는 것으로 나타났습니다.
정확히는 모르겠지만 이렇게 되네요 성능을 향상하다 어떤 식으로든요? 제가 제작하는 데는 약간 열악한 편이고 이와 비슷한 것을 달성하기 위해 어떤 프레임워크를 활용할 수 있는지 정확히 알고 싶습니다(또한 스크립트 간에 AJAX 충돌 문제가 발생합니다.). 나는 사용하고 있습니다 PHP,jquery 내 지원서를 위해.
나는 정보를 얻으려고 노력했다. dev.twitter.com,그리고 블로그 하지만 이에 대한 구체적인 정보를 찾을 수 없었습니다.
가능하다면 나를 안내하고 그것에 대해 약간의 빛을 비추도록 노력하십시오.
시간 내 주셔서 감사합니다.

도움이 되었습니까?

해결책

HTML, JavaScript, 이미지 및 기타 클라이언트 측 요소는 모두 공전.그들은 그대로 있어야 합니다.JavaScript 내에서 동적으로 요소를 생성할 필요는 없습니다.

귀하의 AJAX 호출은 단지 울리기만 하면 됩니다. HTML을 채우는 데 필요한 데이터, 이 데이터를 DOM에 추가합니다.JSON/XML은 프로토콜과 같습니다.

통신 프로토콜은 관련 당사자의 동의를 받아야 합니다.

JS > PHP > JS의 경우 JSON은 표준을 설정하고 단지 사용하기만 하면 선택할 수 있는 훌륭한 '프로토콜'(합의된 통신 방법)입니다. json_encode() / json_decode() 귀하의 PHP에서 $.parseJSON() jQuery를 사용하는 경우.JSON을 사용하는 것은 실제로 개발자로서 '표준'이기 때문에 사용하기로 약속해야 하는 합의된 메시징 형식일 뿐입니다.

필요하지 않은 추가 데이터를 유선으로 전송하고 싶지는 않습니다.꼭 필요한 경우가 아니면 HTML을 보내지 마세요.필요한 데이터만 요청하고 응답하세요.

여기서 너무 많은 말을 하지 않고도 이와 같은 작업을 수행하는 데 도움이 되는 멋진 도구가 많이 있습니다.예를 들어 AngularJS를 사용하면 다음과 같은 문을 사용하여 서버에서 반환된 JSON으로 DOM을 자동으로 업데이트할 수 있습니다. ng-repeat.이는 기본적으로 서버(대시보드와 대시보드 모두)에서 검색된 데이터로 DOM 요소를 채우기 위해 사용자 정의 JavaScript를 작성할 필요가 없음을 의미합니다. 나의 대시보드는 현재 하고 있습니다).

뿐만 아니라 실시간 데이터에 대한 많은 AJAX 요청을 실행하는 것이 AJAX 요청의 목적이 아니기 때문에 웹소켓을 사용하고 있습니다.5~10초마다 데이터가 필요하지만 그보다 더 자주 필요하고 웹소켓과 같은 양방향 기술을 원한다면 React PHP와 Ratchet과 같은 구현을 배워야 합니다(작동할 때). , 그러나 그것은 굉장합니다).

먼저, 클라이언트측과 서버측 모두 사용할 '프로토콜'에 동의하세요.그런 다음, 귀하가 수신한 데이터만 보내고 받으십시오. 필요, 그리고 그것은 변화.다른 것은 정적이며 대역폭만 낭비합니다.HTML을 전달하지 마십시오.마지막으로, 속도 측면에서 JSON과 JSON을 전송합니다.일반 텍스트 보내기 - 문자 그대로 보내는 문자 길이에 따라 다릅니다.그게 다야.그럼에도 불구하고 이러한 이점은 너무 미미하므로 HTML을 보내지 않는 한 걱정할 필요가 없습니다.당신은.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top