通过部分博客认识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. pdf转换为word小工具，挺好

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFwZW5nMDExMg==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  2. Hadoop之—— CentOS Warning: $HADOOP_HOME is deprecated解

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46389499 启动Hadoop时报了一个警告信息.我安装的Hadoop版本号是ha ...

  3. Extjs Web Desktop申请书

    今天我Web Desktop应用基本完成.多语言支持.现有asp,php,jsp版本号. 废话拍了几张照片让大家有一个直观的了解: watermark/2/text/aHR0cDovL2Jsb2cuY ...

  4. IE6浏览器的一些问题

    背景图像缓存 // IE6 background image caching fix. try { document.execCommand("BackgroundImageCache&qu ...

  5. Red Hat Enterprise Linux Server(RHEL) yum安装软件时This system is not registered with RHN. RHN support will be disabled. 的解决方法（转）

    新安装了redhat6.5.安装后,登录系统,使用yum update 更新系统.提示: This system is not registered to Red Hat Subscription M ...

  6. SQLSERVER存储过程语法的具体解释

    SQL SERVER存储过程语法: Create PROC [ EDURE ] procedure_name [ ; number ]     [ { @parameter data_type }   ...

  7. POJ 2418 Hardwood Species(STL在map应用）

    职务地址:id=2418">POJ 2418 通过这个题查了大量资料..知道了非常多曾经不知道的东西. . .. 在代码中凝视说明吧. 代码例如以下: #include <ios ...

  8. 8.19！ 今天我有18生日，点击阅读或顶部 尾随幸运的一天！生日知识！↓——【Badboy】

    话说得生疼.我已经想到了17那年,那是一年的时间!我在这里7.24我认为这是我的生日 结果到处宣传 ,首页疑问发现自己是错的生日 按照农历计勒把我羞辱. 不依照原农历7.24的  今天的国家今天的日历 ...

  9. 2014年度辛星完全解读html部分

    接下来,我们继续学习HTML标签,希望大家可以再接再厉.同一时候辛星也会支持大家.我们一起努力,一起加油. 我们本小节来认识另外几个标签. *************空格和换行************ ...

  10. 如何识别SQL Server中的CPU瓶颈

    原文:如何识别SQL Server中的CPU瓶颈 原文出自: http://www.mssqltips.com/sqlservertip/2316/how-to-identify-sql-server ...