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

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

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>

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

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

실제로 작동 시킬때는 여러변수를 잘 생각하셔야 합니다.

예를 들면 댓글에다가 붙혔을때는 대댓글을 쓰다가 리로드되어 대댓글 창이 사라져서

저의 경우는 대댓글클릭시 clearInterval로 중지시켜버립니다.

댓글 안쓰면 어쩔 수 없는 거지만 UX상 대댓글쓸려다말면 어차피 딴거 클릭할꺼같아서 이정도로만 뒀습니다.

자동으로 돌아가는

일반게시판 예시 : http://internetbat.com/jjal

클릭시 새로고침이 있지만 setinterval로 10분돌리다가 별 움직임이 없으면 clear시키고 클릭시 새로고침을 주는 방식으로 해서 보시려면 10분 기다리셔야되는 예시 : http://internetbat.com/index.php?mid=jinbovsbosu