您的位置：首页 > Web前端 > JavaScript

纯javaScript脚本来实现Ajax功能例子一

2008-07-08 11:20 676 查看
由于大家平时使用微软的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">


[code]<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>

[/code]

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }





在这个页面中我们调用了一个aspx的页面，一个text文件，这二个页面的内容都无关紧要，你在里面随意添加一些内容就可以，主要是想通过这个脚本向大家展示Ajax异步回调的一个过程与实现，在程序中有英文注释请大家自已查看。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航