本文介绍了一个简单的Ajax应用实例，通过JavaScript实现网页的部分内容动态加载而无需刷新整个页面。当点击特定链接时，将调用服务器端脚本并获取响应数据，然后更新对应div元素的内容。
文件:div.html
<html>
<body>
<script>
function InitAjax()
{
var ajax=false;
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
ajax = false;
}
}
if (!ajax && typeof XMLHttpRequest!='undefined') {
ajax = new XMLHttpRequest();
}
return ajax;
}
function show(prov_code)
{
var div_name = "div_" + prov_code;
var div_entity = document.getElementById(div_name);
if ("" == div_entity.innerHTML)
{
var ajax = InitAjax();
var url = "cgi-bin/test.pl?prov=" + prov_code;
ajax.open("GET", url, true);
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200)
{
div_entity.innerHTML = ajax.responseText;
div_entity.style.display = "block";
}
}
ajax.send(null);
}
else
{
div_entity.innerHTML = "";
div_entity.style.display = "none";
}
}
function hidden()
{
document.getElementById("div").style.display="none";
}
</script>
<BODY>
<H2 align="center"><a name="100" href="#" onclick="show(100);">100</a></H2>
<div id="div_100"></div>
<H2 align="center"><a name="210" href="#" onclick="show(210);">210</a></H2>
<div id="div_210"></div>
</BODY>
</HTML>
------------------------------------
文件test.pl
#!c:/perl/bin/perl.exe
##
## printenv -- demo CGI program which just prints its environment
##
#print "Content-type: text/html/n/n";
print "Content-type: text/plain/n/n";
open(FILE_TXT,'C:/Program Files/Apache Software Foundation/Apache2.2/cgi-bin/input_txt/1.txt') or print 'abc';
while (<FILE_TXT>)
{
print;
}
print "$ENV{QUERY_STRING}";
#print 'CGI---bbb!';
#print '<HTML><BODY><h1>CGI执行成功!</h1></BODY></HTML>';
#print '<br><input type=text id="163id">';
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
