글 작성자: 써니루루
어떻게 보면 메뉴링크와 통짜로 만들어진 페이지의 구조와 비슷하달까?

아마 기존에 통짜로 만드는 페이지에서 부분적인 페이지 영역을 바꾸려면

서버스크립트로 구상했어야 했다.

Ajax로 조금 좋은 방법은 아니지만

고전적인 Ajax 방식으로 페이지의 메뉴와 컨텐츠 영역을 ajax로 꾸민다면 다음과 같은 기본적인 코드로 시작해야 하지 않을까 해서 파일을 만들어 봤다.


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XMLHttpRequest</title>
<link rel="stylesheet" href="commcss.css" type="text/css" />
<script language="javascript" type="text/javascript">
// XMLHttpRequest 생성
var ResponseText = "";

function newXMLHttpRequest()
{
  var reqHttp;  
  if (window.ActiveXObject)
  {  // IE
       try
    {
           reqHttp = new ActiveXObject("Msxml2.XMLHTTP");
       }
    catch (e)
    {
           try
     {
               reqHttp =  new ActiveXObject("Microsoft.XMLHTTP");
           }
     catch (e1)
     {
               reqHttp =  null;
           }
       }
  }
  else if (window.XMLHttpRequest)
  {  // IE 이외
       try
    {
           reqHttp =  new XMLHttpRequest();
       }
    catch (e)
    {
           reqHttp =  null;
       }
  }
  return reqHttp;
}

// 데이터 송수신
function openSendStatus(url, method)
{
 var xmlHttp = newXMLHttpRequest();            //XMLHttpRequest 생성
 xmlHttp.open(method, url, true);     //전송방법,URL,통신방법
 xmlHttp.onreadystatechange = function()
 {    //처리상태 변경 발생
  if (xmlHttp.readyState == 4)
  {                 //서버 처리 완료
   if (xmlHttp.status == 200)
   {                //파일 수신 성공
    mainControl(xmlHttp);                   //메인 처리
   }
  }
 }
 xmlHttp.send("");                                     //서버 처리 데이터
}

//메인 처리
function mainControl(xmlHttp)
{
 ResponseText = xmlHttp.responseText;   //서버 파일
}





// 사용자 함수
function loadPage(url, targetId)
{
 openSendStatus(url,'GET');
 document.getElementById(targetId).innerHTML = ResponseText;
}
</script>
</head>

<body>
<h1>XMLHttpRequest</h1>

<div>
  <input type="button" id="btnclick" name="btnclick" value="서버 파일 수신"
            onclick="loadPage('./AjaxTest1.html','rcvData')" />
</div>
<div id="datashow">
  <div id="rcvData"></div>
</div>

</body>
</html>



버튼의 onclick과 같이 a테그나 메뉴의 이미지 테그 같은 부분에 onclick 이벤트 핸들러를 통해 loadPage를 호출하면 원하는 페이지를 우리가 원하는 div id 영역에 출력할 수 있게 된다.

대신 ajax 호출은 웹서버상에 올라가 있어야 사용할 수 있다는 단점아닌 단점이 있겠다.

티스토리툴바