`

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
分享到:
评论

相关推荐

    jQuery+Ajax用户登录功能的实现

    其中大致流程是用户点击页面右上角的登录链接接着弹出div模拟窗口,该窗口通过iframe调用Login.aspx页面,用户输入用户名 密码和验证码后,Login.aspx页面的jQuery代码post到Login.ashx页面处理,Login.ashx页面...

    漂亮div展示图片,ajax,iframe,html内容highslide-3.3.22.zip

    下载了使用就知道,我没骗你,类似jbox功能,但又很多jbox没有的功能,特别是图片的展示,不同于thickbox展示方式,多种样式可以选择,圆角,方角,caption,上一张下一张等等

    原生ajax和iframe框架实现图片文件上传的两种方式

    大家应该可以举出几种常用的异步文件上传功能的实现方式,使用频率较多的有原生ajax和iframe框架,实现图片文件上传,下面就为大家分享图片文件上传的两种方式:原生ajax和iframe框架,供大家参考,具体内容如下 ...

    JavaScript Ajax实现异步通信

    二、没有Ajax之前浏览器是通过iframe来实现异步刷新 1.iframe标签:iframe标签通过src连接到一个页面,其实就是将需要实现异步刷新的内容使用 iframe标签包裹, A.对iframe实现整个页面刷新,其实是通过刷新一个...

    前台js改变Session的值(用ajax实现)

    iframe id=”compareIframe” src=””&gt;&lt;/iframe&gt;&lt;/div&gt; js代码: 代码如下: var compareContent=”你要改变的值”; if (compareContent != “”) { document.getElementById(“compareIframe”).src = ...

    AjaxUpLoad.js实现文件上传功能

    AjaxUpLoad.js的使用实现无刷新文件上传,如图。 图1 文件上传前 图2 文件上传后 1、创建页面并编写HTML 上传文档:  &lt;div class=uploadFile&gt; &lt;span id=doc&gt;&lt;input type=text disabled=disabled /&gt; &lt;...

    在layui tab控件中载入外部html页面的方法

    iframe方式 &lt;div&gt;&lt;iframe src=xxx.jsp&gt;&lt;/iframe&gt; ajax方式 &lt;div id=“externalHtml&gt;&lt;/div&gt; ajax加载数据后,直接赋予 externalHtml[removed] 即可。 script脚本方式 &lt;div&gt;[removed][removed]&lt;/div&gt; ...

    jquery插件ajaxupload实现文件上传操作

    本文实例讲述了jquery插件ajaxupload实现文件上传操作代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 图1 文件上传前 图2 文件上传后 具体代码如下: 1、创建页面并编写HTML 上传文档:  &lt;div ...

    酷睿股票私募网站管理系统 V2010 SP2

    酷睿股票私募网站管理系统,是国内首家采用WAP手机及电脑WEB同步访问的股票私募系统,该系统基于ASP+DIV+CSS+AJAX+XML+MSSQL技术专门为股票私募网站开发的一款CMS网站管理系统,是一个经过完善设计并适用于各种...

    AJAXCDR:利用 Flash 完美解决 JavaScript 和 AJAX 跨域 HTTP POST/GET 表单请求

     本域和其他域的交互,可以通过iframe、代理、JS创建动态脚本等几种方法来实现,这里有篇文章对几种方法作了简要的介绍。  iframe、JS创建动态脚本这两种方法,需要开发者能控制两个域,两端都要编写相应的代码,...

    使用AngularJS来实现HTML页面嵌套的方法

    实现这一功能通过使用以下方式: 使用Ajax – 让一台服务器来调用获取相应的HTML页面,并将其设置在HTML控件的innerHTML。 使用服务器端包含 – JSP,PHP等Web端服务器技术可以在包括动态页面中的HTML页面。 使用...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -使得Asp.net的控件ImageButton具有和Asp.net的Button控件类似的行为(Ajax提交)(feedback:261629698)。 +TabStrip增加GetAddTabReference和GetRemoveTabReference两个函数,用来向TabStrip控件动态增加删除Tab。...

    ExtAspNet_v2.3.2_dll

    -使得Asp.net的控件ImageButton具有和Asp.net的Button控件类似的行为(Ajax提交)(feedback:261629698)。 +TabStrip增加GetAddTabReference和GetRemoveTabReference两个函数,用来向TabStrip控件动态增加删除Tab。...

    UFrame:UpdatePanel和IFRAME结合的优点

    UFrame使DIV的行为类似于IFRAME,它可以加载任何ASP.NET/PHP/HTML页面,并允许所有回发和超链接导航在DIV中进行,这是使常规页面完全启用AJAX的一种轻松方法

    Jquery FancyBox插件Demo

    FancyBox是一个功能强大的Jquery页面弹出框特效插件,能加载DIV,ajax数据,图片,图集,iframe,swf动画等.本文档是一个完整的Demo,对FancyBox的各种功能都进行了验证。

    超实用的jQuery代码段

    1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类...

    Js弹出div窗口完美版

    摘要:脚本资源,Ajax/JavaScript,弹出层 收集的JAVAsCRIPT弹出DIV层窗口的实例,引入了jquery-1.4.1.min.js,实例中有一个无边框iframe完美遮罩演示。这些网页特效对于平时的前端设计用处非常大,学习之后也能提高你...

    ajax后退解决方案

    一、使用iframe,通过[removed]产生历史 代码如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=”utf-8″/&gt; &lt;title&gt;0&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;input type=”...

    AjaxTabsContent

    一个集成TAB的小例子,要用的莫错过,分为: Demo #1- 简单 Demo #2- 任意增加div. Demo #3- 全部内容经过iframe.

    H5 相册 facybox

    Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果。fancybox功能更为齐全,它除了可以加载DIV,图片、图片集、Ajax数据,还能加载SWF影片,iframe页面等等。

Global site tag (gtag.js) - Google Analytics