通过部分博客认识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. [LeetCode141]Linked List Cycle

    题目:Given a linked list, determine if it has a cycle in it. 判断一个链表是否有环 代码: /** * Definition for singl ...

  2. 集差集 哈希表 比较数据库的照片和server画面上，将server垃圾上的图片删除

    SSH 骨架code: public String deleRubbishAd(){ int deleADcount = 0; rubbishADtp = configDao.rubbishADtp( ...

  3. 开源Math.NET基础数学类库使用(12)C#随机数扩展方法

    原文:[原创]开源Math.NET基础数学类库使用(12)C#随机数扩展方法                本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p ...

  4. MapReduce源代码分析MapTask分析

    前言 MapReduce该分析是基于源代码Hadoop1.2.1代码分析进行的基础上. 该章节会分析在MapTask端的详细处理流程以及MapOutputCollector是怎样处理map之后的col ...

  5. 事件冒泡 ，停止事件冒泡 e.stopPropagation()

    <1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>防止起泡 ...

  6. [Apache Spark源代码阅读]天堂之门——SparkContext解析

    略微了解Spark源代码的人应该都知道SparkContext,作为整个Project的程序入口,其重要性不言而喻,很多大牛也在源代码分析的文章中对其做了非常多相关的深入分析和解读.这里,结合自己前段 ...

  7. therefore/so/hence/then/accordingly/Thus

    这几个词的区别大致可从以下几方面去看:1.therefore adv.因此, 所以=for that reason=consequently常用于连接两个并列分句,其前加“and”或分号“:”.He ...

  8. hadoop-HBase-observer的一个样例

    hbase(main):021:0> describe 'users' DESCRIPTION                                                   ...

  9. POJ 3126 Prime Path(BFS 数字处理)

    意甲冠军  给你两个4位质数a, b  每次你可以改变a个位数,但仍然需要素数的变化  乞讨a有多少次的能力,至少修改成b 基础的bfs  注意数的处理即可了  出队一个数  然后入队全部能够由这个素 ...

  10. java安全性语言

    java通过所谓的沙箱安全模型保证了其安全性,以下我们就来看看java提供的安全沙箱机制. 组成沙箱的基本组件例如以下: 1.类装载器结构: 2.class文件检验器: 3.内置于java虚拟机(及语 ...