一个简单的Ajax实例

1、实例功能

在注册页面里验证一个用户名是否有效。在默认情况下，提交按钮为灰色，即不能使用状态。

当用户将焦点从【用户名】文本框中移出时，通过异步调用来判断该用户名是否已经存在。如果用户名已经存在，则在【用户名】文本框后发出文字提示。

如果用户名不存在，也会在【用户名】文本框后发出提示，并将【提交】按钮设为可用。

2、设计HTML页面

<html><head><title>用户注册</title><meta http-equiv="content-type" content="text/html;charset=gb2312"></head><body><p align="center"><b>用户注册</b></p><form name="myForm">用户名：<input type="text" name="myName" onBlur="checkName()"><span id="myDiv">&nbsp;</span><br>输入登录密码：<input type="password" name="password1"><br>再次输入密码：<input type="password" name="password2"><br>密码查询问题：<input type="text" name="problem"><br>密码查询答案：<input type="text" name="key"><br><input type="button" value="提交" name="submitButton" disabled></form></body>
</html>

3、创建用户名验证函数

function checkname()
{
}

4、创建XMLHttpRequest对象

var xmlHttp = null;//创建XMLHttpRequest对象function creatXMLHTTP(){//判断浏览器是否支持ActiveX控件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作为本地对象实现else if(window.XMLHttpRequest){xmlHttp = new XMLHttpRequest();}}

5、判断XMLHttpRequest对象是否创建成功，判断第四步中创建的全局变量是否为空，创建响应XMLHttpRequest对象状态变化的函数，创建和发送HTTP请求

将checkName()函数的代码修改如下:

            //校验用户名是否有效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，请更换浏览器后再进行注册。");}}

6、判断异步调用是否成功，获取服务器上的数据，判断用户名是否已经注册，并在网页上发出提示。

function httpStateChange(){if (xmlHttp.readyState==4){if (xmlHttp.status==200 || xmlHttp.status==0){//获得服务器返回的数据var userNames = xmlHttp.responseText;var arrUserName = userNames.split(";");//定义一个变量，用于判断用户名是否已经存在var bFlag = false;for (i=0;i<arrUserName.length;i++){if (arrUserName[i]==myForm.myName.value){bFlag = true;break;}}//查找节点var node = document.getElementById("myDiv");//更新数据if (bFlag){node.firstChild.nodeValue = "用户名已经存在";myForm.submitButton.disabled = true;}else{node.firstChild.nodeValue = "用户名不存在，可以使用";myForm.submitButton.disabled = false;}}}}

转载于:https://www.cnblogs.com/yulian/p/4777413.html

一个简单的Ajax实例相关推荐

一个简单的Ajax开发框架
根据Ajax与XMLHttpRequest对象一文的介绍,我们可以开发一个简单的Ajax框架供以后开发应用. 首先要知道Ajax的开发流程: 1:初始化XMLHttpRequest,这一步要考虑跨浏览 ...
ajax登陆返回值判断,一个简单的ajax用户登陆返回值问题？有代码
一个简单的ajax用户登陆返回值问题?有代码來源:互聯網 2009-11-13 11:55:56 評論分類: 電腦/網絡 >> 程序設計 >> 其他編程語言問題描述: ...
Java Tread多线程（0）一个简单的多线程实例
作者 : 卿笃军原文地址:http://blog.csdn.net/qingdujun/article/details/39341887 本文演示,一个简单的多线程实例,并简单分析一下线程. 编程多 ...
递归算法（python），汉诺塔问题，斐波那契数列，一个简单的递归实例，用递归实现阶乘，用递归查看目录及文件
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记让这个可爱的宝藏女孩在努力的道路上与你一起同行! 如有转载,请 ...
使用jQuery来实现一个简单的ajax请求
下面的程序使用ajax来实现一个简单的ajax请求 JSP页面代码 <%@ page language="java" import="java.util.*&quo ...
Qt5.9一个简单的多线程实例（类QThread）（第一种方法）
Qt开启多线程,主要用到类QThread.有两种方法,第一种用一个类继承QThread,然后重新改写虚函数run().当要开启新线程时,只需要实例该类,然后调用函数start(),就可以开启一条多线程 ...
jsonrpc php使用,php实现的一个简单jsonrpc框架实例
php实现的一个简单jsonrpc框架实例json rpc 是一种以json为消息格式的远程调用服务,它是一套允许运行在不同操作系统.不同环境的程序实现基于Internet过程调用的规范和一系列的实现 ...
《ANSYS Workbench 14有限元分析自学手册》——1.7　一个简单的分析实例
本节书摘来自异步社区<ANSYS Workbench 14有限元分析自学手册>一书中的第1章,第1.7节,作者: 吕建国 , 康士廷更多章节内容可以访问云栖社区"异步社区&qu ...
一个简单的HTML实例
一个简单的HTML实例适合新手的一个简单的HTML实例 <!DOCTYPE html> <html lang="zh"> <head>< ...

一个简单的Ajax实例

一个简单的Ajax实例相关推荐

最新文章

热门文章