通过部分博客认识Ajax之后，我们通过一个简单的实例来消化消化理论知识，一睹Ajax的庐山真面目。
1.实例功能：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQ1lMX2hhcHB5Z2lybA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
当用户输入username，文本框失去焦点后。通过异步调用来推断该username是否已经存在。若存在，则在上图中红框处显示提示。当username可用时。提交button变为可用状态。
2.设计Html页面：
<span style="font-family:SimSun;font-size:18px;"><strong><span style="font-family:SimSun;font-size:18px;"><strong><body>
<form name="myForm">
username：<input type="text" name=" myName" onblur="checkName()" />
<span id="myDiv"> </span><br />
密 码：<input type="text" name="myPwd"/><br />
<input type="button" value=" 提交" name="submitButton" disabled />
</form>
</body></strong></span></strong></span>
在“username”文本框后加入了一个span标签，该标签划分一个区域。用于显示username的验证信息。 还要加入一个事件。当失去焦点时触发“checkName（）”。
3.javascript代码部分：
//定义用户存储XMLHttpRequest对象的变量
var xmlHttp = null;
//创建XMLHttpRequest对象
function creatXMLHTTP()
{
//推断浏览器是否支持ActiveX控件，针对IE6及之前版本号
if (window.ActiveXObject)
{
//将全部可能出现的ActiveXObject版本号都放在一个数组中
var arrXmlHttpTypes = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
//通过循环创建XMLHttpRequest对象
for (var i=0;i<arrXmlHttpTypes.length;i++)
{
try
{
//创建XMLHttpRequest对象
xmlHttp = new ActiveXObject(arrXmlHttpTypes[i]);
//假设创建XMLHttpRequest对象成功。则跳出循环
break;
}
catch(ex)
{
}
}
}
//推断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7，Firefox，Opera等浏览器
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
//响应XMLHttpRequest对象状态变化的函数
function httpStateChange()
{
if (xmlHttp.readyState==4)//异步调用完成
{
if (xmlHttp.status==200 || xmlHttp.status==0)//异步调用成功。在本机上调试
{
//获得server返回的数据
var userNames = xmlHttp.responseText;
var arrUserName = userNames.split(";");//把获取到的一个字符串切割成字符串数组。 //定义一个变量。用于推断username是否已经存在
var bFlag = false; for(i=0;i<arrUserName.length;i++)
{
if (arrUserName[i]==myForm.myName.value)
{
bFlag = true;//username存在
break;
}
} //查找用于显示提示信息的节点
var node = document.getElementById("myDiv");
//更新数据
if (bFlag)
{
node.firstChild.nodeValue = "username已存在";
myForm.submitButton.disabled = true;//提交button不可用
}
else
{
node.firstChild.nodeValue = "username不存在，能够使用";
myForm.submitButton.disabled = false;//提交button可用
}
}
}
}
//校验username是否有效
function checkName()
{
//创建XMLHttpRequest对象，调用前面定义好的函数
creatXMLHTTP(); if (xmlHttp!=null)
{
//创建响应XMLHttpRequest对象状态变化的函数
xmlHttp.onreadystatechange = httpStateChange;
//创建http请求
xmlHttp.open("get","userName.txt", true);
//发送http请求
xmlHttp.send(null);
}
else
{
alert("您的浏览器不支持XMLHTTP");
}
}
注意：须要建一个userName.txt存储已存在的username。各个username之间用分号隔开。
通过这个小样例。我们从理论阶段向代码实现迈了一步。
从代码中非常easy发现XMLHttpRequest是Ajax的核心对象。
也正是由于各大浏览器对XMLHttpRequest对象的广泛支持，使得Ajax成为一项热门技术。IE浏览器将XMLHttpRequest实现为一个ActiveX对象，其它三大浏览器（Firefox。Opera，Netscape）将事实上现为一个本地javascript对象，所以在创建XMLHttpRequest对象时要经历一番周旋。尽管创建方式不同。但XMLHttpRequest对象拥有的方法和属性大致同样。下篇博客我们来一起揭开XMLHttpRequest对象的神奇面纱，深入解读上面的代码。敬请期待！
版权声明：本文博主原创文章，博客，未经同意不得转载。