纯javaScript脚本来实现Ajax功能例子一
由于大家平时使用微软的Ajax控件过于方便，所以使许多新手对于Ajax的基本原理与实现非常的模糊，我平时也喜欢去java社区，其中有一日看到了一系列的基于jsp与纯javascript的脚本实现Ajax的例子，现在我把它改成asp.net版的，希望对于新手是有帮助的。
首先我们先建立一个Ajax1.html的页面，页面的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AJAX Example 1 - 从文档中读取数据</title>
<style type="text/css">
.showMessage
{
display: none;
position: absolute;
border: 1px solid;
height: 20px;
width: 300;
left: 93px;
top: 112px;
background-color: #FFFFCC;
cursor: pointer;
}
.showMessage2
{
border: 1px solid black;
height: 40;
width: 300;
}
</style>
<script type="text/javascript">
function startLoad(url) {
document.getElementById('loading').innerHTML =
"<img src='../images/loading.gif'/>Loading....";
// call in new thread to allow ui to update
window.setTimeout(function () {
document.getElementById('loading').style.display = "";}, 1);
loadXMLDoc(url);
}
// Using ajax function to load the content from the url
function loadXMLDoc(url)
{
var xmlhttp;
// code for Mozilla, etc.
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
// code for IE
else if (window.ActiveXObject)
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if(xmlhttp) {
xmlhttp.onreadystatechange=function() {
state_Change(xmlhttp, url);
};
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
} else {
alert("Your Browser Sucks!\nIt's about time to upgrade don't you think?");
}
}
// This will be called every state change
function state_Change(xmlhttp, url)
{
// if xmlhttp shows "loaded"
if (xmlhttp.readyState==4)
{
document.getElementById('T1').innerHTML=xmlhttp.responseText;
if(xmlhttp.status == 200) {
document.getElementById('loading').innerHTML =
"<img src='../images/good.gif'/>Text loaded!";
} else {
var errText = "Error loading " + url +
" (" + xmlhttp.status + ": " + xmlhttp.statusText + ")";
document.getElementById('loading').innerHTML =
"<img src='../images/exclamation.16.gif'/>" + errText;
}
}
}
</script>
</head>
<body>
<div id="T1" class="showMessage2">
</div>
<div id="loading" style="display: none; position: absolute; border: 1px solid; height: 20px;
width: 300; left: 93px; top: 112px; background-color: #FFFFCC; cursor: pointer;"
title="Click to hide" onclick="this.style.display='none';">
<img src="../images/loading.gif" />Loading....
</div>
<p>
<input type='button' onclick="startLoad('WebForm1.aspx');" value='Read textfile1.txt' />
<br />
<input type='button' onclick="startLoad('TextFile1.txt');" value='Read notAvailable.txt' />
This will raise a error!</p>
</body>
</html>
在这个页面中我们调用了一个aspx的页面，一个text文件，这二个页面的内容都无关紧要，你在里面随意添加一些内容就可以，主要是想通过这个脚本向大家展示Ajax异步回调的一个过程与实现，在程序中有英文注释请大家自已查看。
