[ajax] jsp결과를 비동기식으로 출력해주기

포털 사이트 같은걸 보면,, 첨부문서 미리보기 할때,

위 그림처럼
마우스 클릭하면 해당 결과를 페이지 리로딩 없이 비동기적으로 뿌려주는데...
(여기서 비동기적이라는건 페이지 리로딩없이 가능하다는것!!!)
보통 ajax기술을 사용합니다
간단한 샘플소스를 보여드리자면 다음과 같습니다.

invalid-file

 

[ajax_test.html]
<script>

function startRequest_preview(divId, htmlURL) {
 //생성
 var xmlHttp;
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
 
 //이벤트걸기
 xmlHttp.onreadystatechange = function() {
  if(xmlHttp.readyState == 4) {
   if(xmlHttp.status == 200) {
    //결과가 나왔다면 해당 레이어에 결과를 출력해줌
    document.getElementById(divId).innerHTML = xmlHttp.responseText;
   }
  }
 }
 
 xmlHttp.open("GET", htmlURL, true);
 xmlHttp.send(null);
}
   
</script>

<a href= "javascript:startRequest_preview('att_data_0', 'http://127.0.0.1:8080/sample1.jsp')" >1</a>
<a href= "javascript:startRequest_preview('att_data_0','http://127.0.0.1:8080/sample2.jsp')" >2</a>

<div id="att_data_0">
[test]
</div>

톰캣에서 테스트하면됩니다.

간단히 설명하자면
att_data_0 이라는 레이어에
http://127.0.0.1:8080/sample?.jsp 의
내용을 출력해주는코드.

ajax형태므로 페이지 리로딩이 아니라... 비동기적으로
처리가 가능해지죠.

물론 실적용시에는 내용출력하는 jsp가
"http://127.0.0.1:8080/sample1.jsp?keyword=" + keyword ... 식으로
값이 변경되는형태로 사용되야 할테구요