Ajax得知(两)—— 一个简单的Ajax示例
通过部分博客认识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示例的更多相关文章
- [MySQL5.6] 一个简单的optimizer_trace示例
[MySQL5.6] 一个简单的optimizer_trace示例 前面已经介绍了如何使用和配置MySQL5.6中optimizer_trace(点击博客),本篇我们以一个相对简单的例子来跟踪op ...
- 一个简单的CSS示例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 & ...
- 一个简单的AJAX实例
创建一个简单的XMLHttpRequest,从一个TXT文件中返回数据. 来源于菜鸟教程 <!DOCTYPE html><html><head><meta c ...
- 一个简单的aJax——后台用servlet技术
示例:webDemo 一.客户端 <%-- Created by IntelliJ IDEA. User: Administrator Date: 15-12-2 Time: 上午5:41 To ...
- struts2框架下的一个简单的ajax例子
举个例子 jsp页面: <%@ page language="java" import="java.util.*" pageEncoding=" ...
- IDDD 实现领域驱动设计-一个简单的 CQRS 示例
上一篇:<IDDD 实现领域驱动设计-CQRS(命令查询职责分离)和 EDA(事件驱动架构)> 学习架构知识,需要有一些功底和经验,要不然你会和我一样吃力,CQRS.EDA.ES.Saga ...
- (转)Web Service入门简介(一个简单的WebService示例)
Web Service入门简介 一.Web Service简介 1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从I ...
- Web Service入门简介(一个简单的WebService示例)
Web Service入门简介 一.Web Service简介 1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从I ...
- 一个简单的ServletContextListener示例
ServletContext可以初始化String类型的参数.但是,如果你希望应用初始化参数是一个数据库DataSource呢?上下文参数只能是String.毕竟,你不能把一个Dog对象塞到XML部署 ...
随机推荐
- TCP/IP 网络精讲:开宗明义及第一课
内容简介 1.课程大纲 2.第一部分第一课:互联网历史 3.第一部分第二课预告:互联网的创立,OSI七层模型 课程大纲 我们将带大家一起来学习很多网络方面的技能,向大家介绍TCP/IP的基础知识点.你 ...
- HDU 1085-Holding Bin-Laden Captive!(生成功能)
Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Ja ...
- 我有DIY一Android遥控-所有开源
我有DIY一Android遥控-所有开源 1.试用 记得宋宝华在「设备驱动开发具体解释」提出一个这种理论「软件和硬件互相渗透对方的领地」,这次证明还是确实是这样,使用上层APP软件加上简单的更为简单的 ...
- URL压缩算法的短地址
时下,短网址应用已经在全国各大微博上開始流行了起来.比如QQ微博的url.cn,新郎的t.cn等. 我们在新浪微博上公布网址的时候.微博会自己主动判别网址.并将其转换,比如:http://t.cn/h ...
- 基于Qt有限状态机的一种实现方式和完善的人工智能方法
基于Qt有限状态机的一种实现方式和完善的人工智能方法 人工智能在今年是一个非常火的方向,当然了.不不过今年,它一直火了非常多年,有关人工智能的一些算法层出不穷.人工智能在非常多领域都有应用,就拿我熟悉 ...
- mysql经常使用命令总结
MySQL经常使用指令(备查) 最经常使用的显示命令: 1.显示数据库列表. show databases; 2.显示库中的数据表: use mysql; show tables; 3.显示数 ...
- linux 使用外部设备的(光盘) 安装和更新库
1. 安装光盘(文件夹不存在,创建) mount -t auto /dev/cdrom /mnt/cdrom 2. 更改索引文件,指定读取本地文件 vi /etc/yum.repos.d/CentOS ...
- Andio Studio
坑一:layout文件中提示(见图):(关键词检索:因为百度和google的时候都没看到这个东东,只在stackoverflow上看到这个提问,但是还没人回答.希望大家可以百度到我这条) ①:Chec ...
- harris 算法python实现
harris 最常用作特征检测算法. 第一个文件harris.py <pre name="code" class="python">from sci ...
- JPA实体继承映射
注意:据说,在本文所指的实体是@Entity注解的类. JPA在对象 - 关系映射通常情况下一个实体对应表,不管是什么这两个实体之间的关系.假设两个实体之间的继承关系.那么它是如何映射? JPA实体支 ...