在哪里摔倒
就在哪里自己爬起来
《JavaScript DOM编程艺术》第十二章，讲了一些基本的Ajax技术，这里记录的是P275 12.2.1 XMLHttpRequest对象这一节里讲的内容，根据书上的方法，写了一个完整的小例子
在这个小例子里，我就是想要测试一下书上的一些方法，我想用一个按钮触发事件，想要用一个div显示处理的过程和处理的结果，三个文件都在下面了
ajaxTest.js
//给文档添加onload事件
function addLoadEvent(func)
{
var oldonload = window.onload;
if(typeof window.onload != 'function')
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
//给文档创建按钮，给按钮添加onclick事件，给文档创建一个div，用于显示执行的过程
function buttonEvent()
{
if(!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
//创建按钮
var button = document.createElement("input");
button.setAttribute("type", "button");
button.setAttribute("value", "read text");
//添加事件
button.onclick = function()
{
readText();
}
//把button添加到文档中
document.body.appendChild(button);
//创建div
var div = document.createElement("div");
var divText = document.createTextNode("点击按钮读取文件");
div.setAttribute("id", "stateLabel");
div.appendChild(divText);
document.body.appendChild(div);
}
addLoadEvent(buttonEvent); //在文档onload时，执行方法，创建button和div
//定义全局变量
var request = null;
function readText()
{
request = getHTTPObject();
if(!request)
{
alert("failed in reading text");
return;
}
request.open("GET", "ajaxTest.txt", true);
request.onreadystatechange = showText;
request.send(null);
}
function showText()
{
if(!document.getElementById) return false;
var stateLabel = document.getElementById("stateLabel");
if(!stateLabel) return false;
switch(request.readyState)
{
case 0:
stateLabel.lastChild.nodeValue = " 尚未初始化";
break;
case 1:
stateLabel.lastChild.nodeValue = " 正在加载";
break;
case 2:
stateLabel.lastChild.nodeValue += " 加载完毕";
break;
case 3:
stateLabel.lastChild.nodeValue += " 正在处理";
break;
case 4:
stateLabel.lastChild.nodeValue += " 处理完毕。读取的内容是：" + request.responseText;
break;
}
}
//不同的浏览器在XMLHttpRequest对象的具体实现和具体使用方面没有统一的标准化做法，ie使用的是XMLHTTP
function getHTTPObject()
{
var waystation;
if(window.ActiveXObject)
{
waystation = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHTTPRequest)
{
waystation = new XMLHttpRequest();
}
else
{
waystation = false;
}
return waystation;
}
ajaxTest.htm
<!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>
<title>ajax test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/ajaxTest.js"></script>
</head>
<body>
</body>
</html>
ajaxTest.txt
Hello World
