Ajax学习（二）—— 一个简单的Ajax实例

通过上篇博客认识Ajax之后，我们通过一个简单的实例来消化消化理论知识，一睹Ajax的庐山真面目。

1.实例功能：

当用户输入用户名，文本框失去焦点后，通过异步调用来判断该用户名是否已经存在。若存在，则在上图中红框处显示提示。当用户名可用时，提交按钮变为可用状态。

2.设计Html页面：

    

        用户名：
         

        密　码：

        
    

在“用户名”文本框后添加了一个span标签，该标签划分一个区域，用于显示用户名的验证信息。 还要添加一个事件，当失去焦点时触发“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

注意：需要建一个userName.txt存储已存在的用户名，各个用户名之间用分号隔开。

    

    通过这个小例子，我们从理论阶段向代码实现迈了一步。从代码中很容易发现XMLHttpRequest是Ajax的核心对象。也正是因为各大浏览器对XMLHttpRequest对象的广泛支持，使得Ajax成为一项热门技术。IE浏览器将XMLHttpRequest实现为一个ActiveX对象，其他三大浏览器（Firefox，Opera，Netscape）将其实现为一个本地javascript对象，所以在创建XMLHttpRequest对象时要经历一番周旋。虽然创建方式不同，但XMLHttpRequest对象拥有的方法和属性大致相同。下篇博客我们来一起揭开XMLHttpRequest对象的神秘面纱，深入解读上面的代码，敬请期待！