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

좋은 웹페이지 즐겨찾기