새로고침없이 페이지 리로딩 간단하고 쉽게 서버한테는 미안하게 하는법 (서버단이 아니고 스킨에 ㅠ jquery load씀) 게시글,댓글,추천등 모든 부분다가능합니다 > scrap 자료실

꽤 오래 고민한건대.......

해답은 역시 내려 놓았을때 나온다고 하였나요?

http://internetbat.com/nexonvsnc

데모페이지구요

데모페이지 이용방법은 죄송스럽게도 로그인은 꼭 하셔야 하는 ㅠ

그래야 새로고침 UI랑 추천 등이 가능해서 입니다.

우선 jquery의 load함수를 이용하는건대요

이제까지 저의 생각도 class단에서 해결봐야한다는 압박에 시달렸습니다.

jQuery('????').load('xxx.php');

식의 load함수 구현 뿐이 안되었기 떄문이죠.

이게 문제가 무엇이냐면

XE는 각개 페이지가 움직이는게 아니고

프론트 html만 존재하고 실상은 class.php다 컨트롤 하고 있으니

저런 파일자체를 딸수가 없는 상황인거죠

그렇다면 class단에서 ajax를 넣어 주어야 한다는 압박감에

귀차니즘으로 미루다가

생각해보니깐 어차피 UI인데 눈에만 보이면 되지 않냐?

는 생각이 급 들었습니다.

그래서 생각해낸게

글목록을 <div id="list"> 글목록내용 </div>

로 감싸고

js에는

function refresh(href) {

jQuery('#list').load(href);

}

리프레쉬 할 링크 (클릭시 새로고침, 추천버튼 등)에

<a onclick="refesh(http://internetbat.com/{$mid} #list)">클릭시 새로고침</a>

인겁니다.

즉, jQuery가 자바스크립트처럼 getelementID 따위가 아니고  jQuery('#xxx #xxx img') 등 마치 css 잡아주는 느낌의 것들도 다 컨트롤 할수 있다는 점에 착안한 점입니다.

물론 stack overflow를 참조하기도 하였습니다만

위에 올렸던 데모페이지에서 보시면 아무 이동없이 깔끔히 새로고침 및 추천이 되는것을 확인할 수 있습니다.

이것은 모바일에서도 동일 작동하고있습니다.

혹시 저와같은 고민이 있으셨던 많은 분들을 위해 작은 코멘트 올려봅니다.

--------------------------------------------------------------------------------------------------------

대충 소스를 날려썼더니

제가봐도 뭐어쩌라는건지 잘모르겠네요..

조금 쉽게 예시를 들어드리겠습니다.

- 페이지이동없이 글목록 불러오기. (댓글, 추천 어디든 상관없습니다.)

<!--새로고침 유도 div-->

<div id="refresh_layer"><a onclick="refesh(http://internetbat.com/{$mid} #list)">클릭시 새로고침합니다.</a></div>

<!--글목록-->

<div id="list">

글목록, 추천, 댓글 등을 감싸세요.

</div>

<!--스크립트 (위치는 무상관. 추천 위치 : head안, 문서의 맨아래. 대세는 맨아래. 저는 아무대나)-->

<s-ript>

function refresh(href) {

jQuery('#list').load(href);

}

</s-ript>

이게 끝입니다.

- 자동새로고침

<s-ript>
var ref_t = setInterval(function (){
jQuery('#list').load('http://internetbat.com/{$mid} #list_load').fadeIn('slow');, 6000);
</s-ript>

6초당 한번씩 새로고침합니다.

서버에 부하가 걸립니다.

ajax가 아니라 눈으로는 그렇지만 실제로는 페이지 전체 (물론 이미지등은 이미 로드되어있으니 html,php코드만)를 로딩해서 byte수준이 아닌 kb수준으로 리로딩됩니다.

저의 경우는 13~4kb정도 로딩됩니다.

XE를 쓰시는 분이라면 거의 동일할것으로 생각됩니다.

그래서 한시간동안 아무짓도 안하면 중지 시켜버려야겠습니다.

<s-ript>
var ref_t = setInterval(function (){
jQuery('#list').load('http://internetbat.com/{$mid} #list_load').fadeIn('slow');, 6000);

setTimeout(function() {

clearIntervar(ref_t)}, 3600000);
</s-ript>

본 소스는 실제 돌아가는 소스를 넣은게 아니라

임의로 작성한 소스이므로 오타등이 있을 수 있습니다.