通过部分博客认识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对象的神奇面纱，深入解读上面的代码。敬请期待！



版权声明：本文博主原创文章，博客，未经同意不得转载。

Ajax得知（两）—— 一个简单的Ajax示例的更多相关文章

  1. [MySQL5.6] 一个简单的optimizer_trace示例

    [MySQL5.6] 一个简单的optimizer_trace示例   前面已经介绍了如何使用和配置MySQL5.6中optimizer_trace(点击博客),本篇我们以一个相对简单的例子来跟踪op ...

  2. 一个简单的CSS示例

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 & ...

  3. 一个简单的AJAX实例

    创建一个简单的XMLHttpRequest,从一个TXT文件中返回数据. 来源于菜鸟教程 <!DOCTYPE html><html><head><meta c ...

  4. 一个简单的aJax——后台用servlet技术

    示例:webDemo 一.客户端 <%-- Created by IntelliJ IDEA. User: Administrator Date: 15-12-2 Time: 上午5:41 To ...

  5. struts2框架下的一个简单的ajax例子

    举个例子 jsp页面: <%@ page language="java" import="java.util.*" pageEncoding=" ...

  6. IDDD 实现领域驱动设计－一个简单的 CQRS 示例

    上一篇:<IDDD 实现领域驱动设计-CQRS(命令查询职责分离)和 EDA(事件驱动架构)> 学习架构知识,需要有一些功底和经验,要不然你会和我一样吃力,CQRS.EDA.ES.Saga ...

  7. （转）Web Service入门简介(一个简单的WebService示例)

    Web Service入门简介 一.Web Service简介 1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从I ...

  8. Web Service入门简介(一个简单的WebService示例)

    Web Service入门简介 一.Web Service简介 1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从I ...

  9. 一个简单的ServletContextListener示例

    ServletContext可以初始化String类型的参数.但是,如果你希望应用初始化参数是一个数据库DataSource呢?上下文参数只能是String.毕竟,你不能把一个Dog对象塞到XML部署 ...

随机推荐

  1. 多功能截图工具(WinSnap)4.5.6 绿色汉化版(附注册码)

    http://www.uzzf.com/Soft/9840.html 注册名:www.uzzf.com 注册码:FGE5ML-XD2C0G33-GCMDLRB5

  2. MAC 10.10 apache 服务器配置

    mac中自带了apache服务器, 如果需要在mac上使用apache服务器, 只需要配置并启动服务器即可. mac 10.10 中自带的apache版本是 2.4 mac 10.9 中自带的apac ...

  3. [Android 4.4.4] 泛泰A870 通过刷第三版 Mokee4.4.4 KTU84P 20140626 RC2.1 by syhost

    主题及注意事项请访问以前的版本: http://blog.csdn.net/syhost/article/details/29931291 此RC2.1版比RC2.0改进的地方: 1. Mokee本身 ...

  4. 12本最优秀的Android开发电子书强力推荐

    如今已经是手机互联网时代,手机应用越来越普及.Android作为基本的手机操作系统.吸引了众多开发人员開始为Android系统开发应用. 假设你正在开发或者准备进行Android的开发,我们今天推荐的 ...

  5. spark未来的发展方向

    spark是採用scala语言开发的基于内存的计算框架,作者Matei Zaharia,在未来的发展方向: 1.spark streaming:提高spark的流处理能力,使得spark更适于通过一套 ...

  6. Android笔记 之 旋转木马的音乐效果

    一.前言-- 大家一定在百度音乐上在线听过歌,有没有注意到那个旋转唱片-- 就上面那个,当音乐在播放的时候,那个光碟轮子在转,就想旋转木马一般.感觉好好玩啊. 碰巧想起前阵子做音乐播放器,哎,那这个也 ...

  7. HTTP协议中返回代码302的情况

    http协议中,返回状态码302表示重定向. 这样的情况下,server返回的头部信息中会包括一个 Location 字段,内容是重定向到的url

  8. cocos2dx 使得单麻将(三)

    cocos2dx 使得单麻将(三) 麻将逻辑4.得到手牌数据 我们已经保存了一个一维数组, 类似于一个表格,统计出全部牌相应的数量, 但我们如何得到当前手中是什么牌呢 //扑克转换 BYTE Swit ...

  9. 基于GeoHash算法的附近点搜索实现（一）

    1. 引入 最近在参加学校的计算机仿真大赛,时间好像有点不够,所以只完成了前面的一部分最基础的功能,中途还是选择了放弃.但是之前的部分的确觉得完成得还不错,在这里分享一下.题目是要完成一个宇宙飞船加油 ...

  10. MVC中的Views下面的视图放到Views文件夹外

    实战:把ASP.NET MVC中的Views下面的视图放到Views文件夹外   园子里写的文章的都是把控制器从传统的项目中的Controllers拿出来单独放,但很少几乎没有把视图从Views拿出去 ...