本文介绍了一种利用JavaScript和XMLHttpRequest实现页面内容动态加载的方法。通过实例演示了如何设置对象ID并根据请求参数的不同返回变化的内容。展示了index.htm静态文件与go.asp脚本文件的配合使用。
1、静态文件index.htm
<script type="text/javascript">
// JavaScript Document for set innerHTML
function setInnerHTML(objId, html){
try{
var obj = document.getElementById(objId);
obj.innerHTML = html;
}catch(exception){
alert("Make sure the object id is correct!");
}
}
function getInnerHTML(objId){
try{
var obj = document.getElementById(objId);
return obj.innerHTML;
}catch(exception){
alert("Make sure the object id is correct!");
}
}
/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != "undefined") {
xmlHttp = new XMLHttpRequest();
}
function info(){
try{
var str = window.location.href;
var pos = str.indexOf("?");
var parastr = str.substring(pos+1);
var url = "go.asp?" + parastr;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = infoOk;
xmlHttp.send(null);
}catch(exception){}
}
function infoOk(){
if (xmlHttp.readyState == 4) {
try{
var response = xmlHttp.responseText;
var alertObj = document.getElementById("info");
alertObj.innerHTML=response;
}catch(exception){}
}
}
</script>
<body onload="info()">
<div id="info">载入数据...</div>
</body>
// JavaScript Document for set innerHTML
function setInnerHTML(objId, html){
try{
var obj = document.getElementById(objId);
obj.innerHTML = html;
}catch(exception){
alert("Make sure the object id is correct!");
}
}
function getInnerHTML(objId){
try{
var obj = document.getElementById(objId);
return obj.innerHTML;
}catch(exception){
alert("Make sure the object id is correct!");
}
}
/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != "undefined") {
xmlHttp = new XMLHttpRequest();
}
function info(){
try{
var str = window.location.href;
var pos = str.indexOf("?");
var parastr = str.substring(pos+1);
var url = "go.asp?" + parastr;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = infoOk;
xmlHttp.send(null);
}catch(exception){}
}
function infoOk(){
if (xmlHttp.readyState == 4) {
try{
var response = xmlHttp.responseText;
var alertObj = document.getElementById("info");
alertObj.innerHTML=response;
}catch(exception){}
}
}
</script>
<body onload="info()">
<div id="info">载入数据...</div>
</body>
2、脚本文件go.asp
<%
Response.Expires = -1
Response.ExpiresAbsolute = Now() - 1
Response.cachecontrol = "no-cache"
Action=LCase(Request.QueryString("do"))
if action="" then
else
str="12345"
end if
Response.AddHeader "Content-Type","text/html; charset=gb2312"
response.write ""&str&""
%>
Response.Expires = -1
Response.ExpiresAbsolute = Now() - 1
Response.cachecontrol = "no-cache"
Action=LCase(Request.QueryString("do"))
if action="" then
else
str="12345"
end if
Response.AddHeader "Content-Type","text/html; charset=gb2312"
response.write ""&str&""
%>
3、测试index.htm和index.htm?do=1会显示不同结果
扫一扫
5863
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
