我在上一篇文章中写了在asp中如何用Ajax技术免重载网页检查用户名是否被占用，那么这篇博文主要通过一个简单的Ajax应用来解析一下Ajax技术的原理。
首先需要三个文件，simpleAjax.hml(用来看效果)，simpleAjax.js(用JavaScript中的XMLHttpRequest对象来直接与服务器进行通信)，simpleAjax.txt(可以自定义异步通信输出内容的文件)。
1 新建simpleAjax.html文件
| <html>
<head>
<title>一个简单的Ajax应用</title>
<script type="text/javascript" src="simpleAjax.js"></script>
</head>
<body>
<input type="button" value="Ajax请求" onclick="startrequest()"/>
<div id="responseResult"></div> <!--节点responseResult将在simpleAjax.js中被使用，最后输出simplAjax.txt中的文字-->
</body>
</html>
|
2 新建simpleAjax.js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 | var xmlhttp=null;//首先创建一个作为 XMLHttpRequest 对象使用的 xmlhttp 变量,值设为 null
function createXMLHttpRequest(){
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();//针对 IE7+, Firefox, Chrome, Opera, Safari
}
else if (window.ActiveXObject){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//针对 IE6, IE5
}
}
//由simpleajax.html中的按钮点击调用这个函数
function startrequest(){
createXMLHttpRequest();//调用上面createXMLHttpRequest()函数
xmlhttp.onreadystatechange=handlestatechange;//调用下面handlestatechange()函数
xmlhttp.open("GET","simpleAjax.txt",true);
xmlhttp.send();
}
function handlestatechange(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("responseResult").innerHTML=xmlhttp.responseText;
}
}
|
名称解释：
| 第一个函数 createXMLHttp() 的作用是根据客服端浏览器类型（IE和非IE）以及IE中安装的JavaScript技术版本的不同创建不同的XMLHttpRequest对象。XMLHttpRequest对象用于在后台与服务器交换数据。它能够：在不重新加载页面的情况下更新网页、在页面已加载后从服务器请求数据、在页面已加载后从服务器接收数据、在后台向服务器发送数据。
其中 xmlhttp.onreadystatechange 表示每当存有xmlhttprequest的状态信息的readyState改变时，就会触发 这个onreadystatechange 事件。当 readyState 等于 4 且状态为 200 时，表示响应已就绪。
其中 xmlhttp:open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword) 表示创建一个新的http请求(bstrUrl)，并指定此请求的方法(get,post)、URL以及varAsync布尔型，指定此请求是否为异步方式，默认为true即当状态改变时会调用onreadystatechange属性指定的回调函数。
其中 xmlhttp.send() 表示发送请求到http服务器并接收回应。
|
3 新建simpleajax.txt文件
任意在这个txt文件里面写入内容，例如： hello,i have changed myself! 。
4 延展：simpleAjax.js的另一种形式（结果一样）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 | var xmlhttp=null;//首先创建一个作为 XMLHttpRequest 对象使用的 XMLHttp 变量,值设为 null
function startrequest(){
if (window.XMLHttpRequest){//针对 IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{// 针对 IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("responseResult").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","simpleAjax.txt",true);
xmlhttp.send();
}
|
5 相关截图
Comments »