div+ajax 유사 iframe 기능 구현
2725 단어 |
function showAtRight(url)
{
sendRequest(url);
}
var request=false;
try
{
request = new XMLHttpRequest();
}
catch (trymicrosoft)
{ try
{ request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft)
{ try { request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
function sendRequest(url) {
//alert(request);
request.open("GET", url, true);
alert(url);
request.onreadystatechange = processResponse;
request.send(null);
}
function processResponse() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText;
document.getElementById("content").innerHTML = response;
} else if (request.status == 404) {
alert("Requested URL is not found.");
} else if (request.status == 403) {
alert("Access denied.");
} else
alert("status is " + request.status);
}
}
...
...
<a href="#" onclick="showAtRight(‘folers/target.jsp’)"></>
...
...
<div id="content"></div>
div를 이용하면 왼쪽에서 오른쪽을 누르면 나타나는 효과를 실현할 수 있다.
js가 웹 페이지를 가져오는 주소는 현재 웹 페이지에 따라 상대적으로 얻을 수 있습니다.루트 디렉터리를 인식하지 못하고,
예:
myweb-|
|-this.jsp
|-show.jsp
-folders- |
|-target.jsp
aax에서 페이지에 접근하려면/folers/target을 사용할 수 없습니다.jsp, 왜냐하면 그는 사이트 디렉터리를 식별하지 못하기 때문이다
또한 주의해야 할 것은 만약에 target에 css와 js가 있다면 반드시 홈페이지에 놓아야 한다는 것이다. 번역된 jsp는 자바의class 파일이기 때문에 css 형식이 있지만 (firefox에서 css가 정상적으로 표시되고 js가 실행할 수 없음)
그러나 여기는 aax가 되돌아오는 페이지입니다. 이 때 js와 css를 실행하지 않습니다. (target.jsp에서alert를 통해 알 수 있듯이 js의 코드를 실행하지 않습니다. 따라서 되돌아오는 css와 js는 소용없습니다.)
만약 단순한 두 페이지 사이가 포함된다면, 하위 페이지의 css와 js는 하위 페이지에서 실행할 수 있습니다.
홈 페이지에서도 하위 페이지의 js를 호출할 수 있습니다.
그러나 이때 페이지의 js와 렌더링의 선후 순서를 고려해야 한다
예를 들면
main.jsp
<DIV><%@ include file="left.jsp"%></DIV>
<DIV>
<%@ include file="right.jsp"%>
</DIV>
오른쪽에 있고 싶어요.jsp에 left에서 연결된 내용을 표시합니다.이때 css와 js를 메인에 두어야 합니다.jsp 중
doucment를 사용할 수 없습니다.getElementById('content').innerHTML='<%@ include file='>'방식...
이유
http://holdbelief.iteye.com/blog/312500