通过部分博客认识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. T-Sql（一）简单语法

    原文:T-Sql(一)简单语法 Sql Server是鄙人学习的第一种数据库,对Sql Server有一种特别的情感,下面就说一下Sql Server的简单语法,适用初学者. 1,创建数据库creat ...

  2. [原创].NET 分布式架构开发实战之二 草稿设计

    原文:[原创].NET 分布式架构开发实战之二 草稿设计 .NET 分布式架构开发实战之二 草稿设计 前言:本篇之所以称为草稿设计,是因为设计的都是在纸上完成的.反映了一个思考的过程. 本篇的议题如下 ...

  3. memcached 实验论文

    虽然在这个年龄段谈话memcached 它可能是一个有点晚,最为cached 在应用程序中redis 在之上,下面将谈谈自己的一些看法, 这个文件是不是memcached 理论描述,只写的实验数据和结 ...

  4. bitnami redmine 安装插件

    https://wiki.bitnami.com/Applications/BitNami_Redmine_Stack#How_to_install_a_plugin_on_Redmine.3f 版权 ...

  5. JMS ActiveMQ研究文档

    1. 背景 当前,CORBA.DCOM.RMI等RPC中间件技术已广泛应用于各个领域.但是面对规模和复杂度都越来越高的分布式系统,这些技术也显示出其局限性:(1)同步通信:客户发出调用后,必须等待服务 ...

  6. bonecp使用数据源

    bonecp.properties jdbc.driverClass=oracle.jdbc.driver.OracleDriver jdbc.jdbcUrl=jdbc:oracle:thin:@19 ...

  7. python2编码总结（转）

    以下依次列出python2常遇到的几个问题及讲解. # -*- coding:utf-8 -*- python2默认以ASCII编码,但是在实际编码过程中,我们会用到很多中文,为了不使包含中文的程序报 ...

  8. Afinal载入网络图片及下载文件用法

    Afinal高速开发框架使用起来很方便.以下将解说怎样利用Afinal载入网络图片及下载文件: 先看效果图: 注意:使用Afinal前需加入Afinal的jar,能够在这里下载:http://down ...

  9. 网络语音视频技术浅议 Visual Studio 2010（转）

    我们在开发实践中常常会涉及到网络语音视频技术.诸如即时通讯.视频会议.远程医疗.远程教育.网络监控等等,这些网络多媒体应用系统都离不开网络语音视频技术.本人才疏学浅,对于网络语音视频技术也仅仅是略知皮 ...

  10. B/S在北大青鸟-ASP.NET 总结

    一个.前言: 这几周跟着于海涛老师进入了.NET编程世界.领略到了ASP.NET的精髓. 要说起ASP.NET的发展史,那要追溯到HTML了,由于它功能简单,无法从用户接收信息并自己主动进行更新.而不 ...