Ajax--模板Html生成

最新推荐文章于 2021-06-20 04:01:23 发布

原创最新推荐文章于 2021-06-20 04:01:23 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #xmlhttprequest #function #div #url #null

Asp.Net 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用AJAX实现页面内容动态替换的方法。通过编写一个简单的JS文件，可以在不刷新整个页面的情况下，仅替换body区域的内容为其他页面的内容。这种方法适用于希望改善用户体验，减少页面加载时间的Web应用。

首先需要在项目中加入一个很简单的js文件==> 将整个要替换成html页面的body区域内容返回回来并在html中做显示在html里这样些<body onload=t("Default.aspx")></body>==>意思就是将Default.aspx页面替换成html页面在超连接中使用此方法 <a href="Registor.aspx" onclick="t(Registor.aspx)">注册</a>==>将Registor.aspx替换成html页面

js文件： function t(url) { var xmlHttp; if(window.XMLHttpReqeust) { xmlHttp = new XMLHttpRequest(); } else if(window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHttp"); } xmlHttp.open("POST",url,true); xmlHttp.onreadystatechange=function() { if(xmlHttp.readystate==1) { document.body.innerHTML="<div style='padding:300px;text-align:center;'><div style='padding:30px;text-align:center;border:1px #ebebeb solid;'>页面正在加载中,请稍候.......</div></div>"; } if(xmlHttp.readystate==4) { if (xmlHttp.status==200) { document.body.innerHTML=xmlHttp.responseText; } } } xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;"); xmlHttp.send(null); }