日期:2014-05-16  浏览次数:20676 次

div+ajax实现类似iframe功能
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
在ajax里要访问页面,这时不能用/folers/target.jsp,因为他不会识别网站目录

另外需要注意的是,如果target里面有css和js,必须放在主页才起作用、、因为编译后的jsp为java的class文件,里面虽然有css格式(在firefox里css显示正常,js不能执行)
但这里是ajax返回的页面,这时不会执行js和css(可以在target.jsp里alert一下,可以发现,不会执行js的代码。所以返回页面的css和js没用)
如果单纯的两个页面之间include,子页面的css和js在子页面是可以执行的。
主页面也可以调用子页面的js。
但这时要考虑页面中js和渲染的先后顺序
例如有
main.jsp
<DIV><%@ include file="left.jsp"%></DIV>
<DIV>
<%@ include file="right.jsp"%>
</DIV>

想在right.jsp里显示left中连接的内容。这时应该把css和js放在main.jsp中
不能使用 doucment.getElementById('content').innerHTML='<%@ include file="">'的方式。。
原因请看
http://holdbelief.iteye.com/blog/312500