通过部分博客认识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. 调用CachedRowSetImpl类时，为什么会出现这样的错误

    Access restriction: The type CachedRowSetImpl is not accessible due to restriction on required libra ...

  2. NBA球员 ESPN前20排名：詹姆斯再居榜首

    2014年 ESPN球员实力最后排名 没想到 保罗-乔治没有上榜.之前预測的火箭两大明星排名落后了,杜兰特排到第8有点出乎意料. 戴维斯升得那么快有点出乎意料,一个球队拥有两位排前十位的球队:骑士,快 ...

  3. hdu4362 dp + 单调队列优化

    dp传输方程很easy需要 dp[i][j] = min{dp[i - 1][k] + abs(pos[i][j] -pos[i - 1][j]) + cost[i][j]} n行m一排 每个传输扫描 ...

  4. JDK自带的监控分析工具JConsole

    非常多开发人员认为自己懂Java编程.事实是大多数开发人员都仅仅领会到了Java平台的皮毛.所学也仅仅够应付工作. 作者将深度挖掘Java平台的核心功能.揭示一些鲜为人知的事实.帮助您解决最棘手的编程 ...

  5. 使用API创建AR 贷项通知单

    DECLARE --8000000063 l_dummy varchar2(240); l_customer_trx_id ra_customer_trx.customer_trx_id%type; ...

  6. default argument given of parameter 的问题

    今天写了一个类,当中的一个方法用到了默认參数,结果报了  "default argument given of parameter 的问题 " 错误. 类头文件的声明例如以下: v ...

  7. UVA 257 - Palinwords(弦HASH)

    UVA 257 - Palinwords 题目链接 题意:输出一个文本里面的palinword,palinword的定义为.包括两个不同的回文子串,而且要求回文子串不能互相包括 思路:对于每一个单词推 ...

  8. cocos2d-x使用CCClippingNode实现跑马灯

    直接在代码,这是一个很好的包layer,可以直接调用  //原来白白 bool TestLayer::init() { CCSize size = CCDirector::sharedDirector ...

  9. TP-Link WR842N VPN错误619 不能建立到远程计算机的连接

    一直在用Tenacy这个VPN,不限时间不限流量的,可是近期发现链接VPN总是失败.在网上查了一下,发现居然是路由器的问题!回忆一下果然是路由器出事儿了,换这个842N之前,一直是能够链接VPN的,所 ...

  10. Dynamic proxy

    import java.lang.reflect.InvocationHandler; import java.lang.reflect.Method; import java.lang.reflec ...