마이크온블로그닷컴 ::Just Quit your Job!::

제목을 어떻게 해야할찌 몰라서.. 일단 [Ajax 토글형 댓글 링크 버튼] 이라고 적고 시작한다.
이게 어떤거냐면,.. Me2day에 있는 댓글(0) 버튼이라고 생각하면 된다.
미투데이에 요 버튼이 좀 재밌는데.. 버튼이라고 하면, 보통 input 태그를 이용한 버튼을 이용하지만..
요건 링크와 자바스크립트 그리고 CSS 스타일을 적절히 이용한다.

먼저 링크,
링크는 보통 아래처럼 이용한다.
<a href="이동할 주소">이동링크이름</a>
<a href="./comment">댓글</a>

여기에 자바 스크립트를 적용해서 이벤트를 걸면,..
<a onclick="이벤트함수이름();" href="이동할 주소">이동 링크 이름</a>
<a onclick="comment_list_toggle();" href="./comment">댓글</a>

위에 처럼 쓰는게 보통인데.. 위에 경우엔 보통 링크를 클릭하면 해당 링크로 점프를 띤다.
그러면 당근 버튼 효과를 내지 못한다.. 그래서 아래처럼..

<a onclick="이벤트함수이름(); return false;" href="이동할 주소">이동 링크 이름</a>
<a onclick="comment_lists_toggle(); return false;" href="./comment">댓글</a>

자바스크립트에 false를 리턴하게 되면, 클라이언트에서 서버로 전송을 하지않고, 클라이언트에서 함수만 실행하고 종료를 하게 된다. 보통 취소 버튼을 구현할때 요걸 많이 쓴다.

그러면 바로 요 이벤트 함수를 통해서 comment 라고 지정해둔 id 태그의 스타일을 변화시키면 된다.
<script type="text/javascript">
//<![CDATA[
        function comment_lists_toggle() {
            if(document.getElementById("comment").style.display=="none")
            {
                document.getElementById("comment").style.display="";
            }   
            else
                document.getElementById("comment").style.display="none";          
        }
//]]>
</script>

기본은 머 저렇게 하면되는데... 기본적으로 Ajax 콜백에 대한 이해가 있으면,..
어렵지 않게 구현할수 있을것이다..

사실 내가 젤 어려웠떤건,..-_- 따옴표 처리문제..ㅜㅜ..
아무대로 에디터를 한번 따로 만들어봐야겠다..

지난 짬뽕나 프로젝트 기간동안 내내 문제를 일으켜온 크로스 도메인 문제...
일단 이 부분을 내가 맡은 파트가 아니라서 잠시 접어두고 있었는데...

오늘 찬찬히 소스 코드를 디벼보았다..

일단 자바스크립트에서 크로스 도메인 문제란,.. 보안과 직결된다..
자세한 내용은 크로스 도메인으로 검색해보면 나올것이고...

내가 오늘 해결한 방법부터 정리하면...
브라우저에 따라 2가지가 있겠다..

먼저 인터넷 익스플로러.. !! 크로스 도메인 문제를 체크하기전에 먼저 체크해야할게 있다..
바로 인터넷 옵션 - 보안 - 사용자 지정 수준 - 도메인 간의 데이타 소스 엑세스!!!
바로 요부분이다. 이게 IE 에서 디폴트로 사용안함으로 되어 있기때문에..

OpenAPI 로.. 특히 자바스크립트로 먼가를 할때.. 자꾸 접근제한 에러가 생긴다..
정확히 말하면,.. Ajax에선 XMLHttprequest 객체를 선언하고.. 이 객체의 Open() 메쏘드를 호출할때..
바로 이 접근 제한 문제가 발생한다..

은근히 해결책은 간단했다.. 오늘 정말 4시간동안.. 소스코드 분석하고.. GWT로 작성된거 ASP.NET 예제코드로 바꿔서 테스트해보고.. 쌩쑈를 한 기분이다. 그런데 결론은 ㅎㅎㅎ 삽질 삽질 삽질.... 하는 소리가 들리는군....

바로 IE 저 도메인 간 데이타 소스 엑세스를 사용안함에서 사용 이나 확인 으로 바꿔만 주면 되는것이었다..젠장..ㅜㅜ.. OTL ....난 왜, 또 삽질을 한것이더냐..ㅎㅎㅎ 삽질은 디버깅의 어머니라고 누가 말했떠냐.ㅎㅎㅎ

옵션에서 "사용함"보다는 "확인"을 권장한다.. 사용으로 해놓으면.. 브라우져로 서핑할때 마다 이상한 코드 저절로 다운받아서 실행하게 될찌 아무도 모르기 때문에... 확인으로 하는것을 적극 권장한다..
그럼 실제 OpenAPI로 호출했을때.. 접근권한 경고 메시지를 보게 될것이다..
가비~얍게... 확인 눌러주시고.. 다시해보면.. 잘 된다..ㅋㅋㅋ

반면 파이어폭스는 여러책을 참조한 결과.. 보안정책이 달라서..
보안메니져를 직접 호출해야한다고 하넹..-_-
요부분은 나중에 좀더 공부해서 정리해봐야겠땅..

오늘은 여까지.. 나랑 비슷한 문제를 가진사람들 제발 삽질을 안했으면 하는마음으로...작성했다..ㅎㅎ