`

Ajax初例

阅读更多

Ajax_user.html

<html>
	<head>
		<title>用户注册</title>
		<meta http-equiv="content-type" content="text/html;charset=gb2312">
		<script language="javascript" type="text/javascript">
		<!--
			//定义用于存储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();
				}
			}
			
			//响应XMLHttpRequest对象状态变化的函数
			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;
						}
					}
				}
			}
			
			//校验用户名是否有效
			function checkName()
			{
				//创建XMLHttpRequest对象
				creatXMLHTTP();
				if (xmlHttp!=null)
				{
					//创建响应XMLHttpRequest对象状态变化的函数
					xmlHttp.onreadystatechange = httpStateChange;
					//创建HTTP请求
					xmlHttp.open("get","Ajax_user.txt",true);
					//发送HTTP请求
					xmlHttp.send(null);
				}
				else
				{
					alert("您的浏览器不支持XMLHTTP,请更换浏览器后再进行注册。");
				}
			}
		-->
		</script>
	</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>

 

  

Ajax_user.txt

张三;李四;王五;钱六

 

分享到:
评论

相关推荐

    AJAX实例应用初体验:自动保存草稿

    ### AJAX实例应用初体验:自动保存草稿 #### 背景介绍 随着Web应用程序的发展,用户体验成为衡量一个网站或应用是否成功的重要因素之一。在众多提升用户体验的技术中,AJAX(Asynchronous JavaScript and XML)因其...

    基于WebGL和AJAX的WEB3D应用研究——以在线3D协作交互式设计为例.pdf

    基于WebGL和AJAX的WEB3D应用研究——以在线3D协作交互式设计为例 本文主要研究基于WebGL和AJAX的WEB3D应用,提出了一套WEB3D引擎的构建方案,并以多人在线协作式3D设计为例,给出了整套架构方案的代码实现。WEB3D...

    带动画效果的Ajax html5表单.rar

    带动画效果的Ajax html5表单,鼠标放在表单任意输入框上时,该输入框高亮并且变大显示,边框高亮,若某项表单中输入的数据与初设定义的不符或未填写,则会立即显示出Ajax浮动提示效果,在HTML5环境下,结合jquery...

    ajax:一个ajax模块

    以jQuery为例,一个简单的Ajax请求可以这样写: ```javascript $.ajax({ url: 'http://example.com/api/data', type: 'GET', success: function(data) { console.log(data); }, error: function() { console...

    JavaScript网页设计300例

    JavaScript网页设计300例是一本深度探讨JavaScript在网页设计中的应用实践的资源集合,旨在帮助初学者和进阶者掌握这一重要的前端编程语言。JavaScript是互联网上最广泛使用的脚本语言,它赋予了网页动态交互的能力...

    ASP.NET由简到难编程百例

    ASP.NET是由微软公司开发的一种用于构建Web应用程序的框架,它基于.NET Framework,为开发者提供了丰富的功能和工具,简化了...无论你是初涉ASP.NET的新手,还是寻求进阶提升的开发者,都能从这个百例教程中受益匪浅。

    PHP经典100例.rar

    11. **PHP与JavaScript交互**:AJAX技术,通过JavaScript发送异步请求,更新页面部分内容。 12. **PHP安全**:防止XSS攻击、CSRF攻击,以及如何对用户输入进行过滤和验证。 13. **PHP性能优化**:内存管理、代码...

    微軟MVP的ASP.NET 4.5專題實務I

     ASP.NET最吸引初學者的大型範例,就是GridView這四大控制項。本書以GridView為例,徹底剖析其中的關鍵與細節,一旦學成,再也沒有其他控制項會難倒你。  核心觀念篇  本書收錄的兩大章 ADO.NET內容,除了觀念的...

    JSP经典网页特效500例

    《JSP经典网页特效500例》是针对JSP网页开发的一份宝贵资源,它包含了大量的实例,旨在帮助开发者掌握并应用各种网页...无论你是初涉JSP的新手,还是希望巩固和扩展JSP知识的开发者,这份资源都将为你提供宝贵的指导。

    微軟官方ASP.NET3.5 使用C#官方版教材範例與代碼

    4. **AJAX支持**:ASP.NET 3.5引入了ASP.NET AJAX,它允许部分页面更新,提高了用户体验。ScriptManager、UpdatePanel、Timer等控件使得实现无刷新页面更新变得容易。 5. ** LINQ (Language Integrated Query)**:...

    P2PDA:使用从第三方网站刮取的数据来分析中国P2P行业(使用从第三方数据网站爬取的数据分析中国P2P)

    掌上电脑使用从第三方网站刮取的数据来分析中国P2P行业(使用从第三方数据网站爬取的数据分析中国P2P行业现状)关于数据来源本项目写于2017年七月初,主要使用Python爬取网贷之家以及人人贷的数据进行分析。...

    做程序员历年考试笔试试卷有感

    作者以自身为例,庆幸自己掌握了C#、ASP.NET、SQL Server 2005、CodeSmith、Ajax、Div+CSS、XML、Java (JSP.NET)、PHP、MySQL等多样化的软件技术,认为这些技能在当前市场中仍具价值。同时,他提醒年轻的编程新手,...

    点击yahoo标志的叹号发音的JavaScript特效

    内容索引:脚本资源,Ajax/JavaScript,Yahoo,叹号,发音 JavaScript特效:点击yahoo标志上的叹号会发音,戴上耳机,点击叹号,听听吧~里面有人在唱歌,初想一下,貌似实现挺简单,其实不然,不过本例用到了Flash。

    项目演示模板1.pptx

    项目的开发周期分为八个阶段,从需求分析到项目验收,预计在四月初完成。 技术实现上,项目采用J2EE架构,客户端基于浏览器。Web层利用Struts框架和MVC设计模式,结合Ajax.dwr框架提升交互性。业务层则使用JavaBean...

    论UML应用

    UML的历史可以追溯到20世纪80年代末至90年代初,这一时期出现了多种面向对象的建模语言和技术。为了统一这些不同的建模方法,Grady Booch、James Rumbaugh 和 Ivar Jacobson 在1995年共同创立了UML。最初的版本0.8...

    FairyAndStar

    《JavaScript编程精讲:以FairyAndStar项目为例》 在深入探讨JavaScript编程技术之前,我们先了解一下项目“FairyAndStar”。这个项目的名字颇具诗意,可能暗示着它与奇幻、星辰或者游戏元素有关。然而,由于没有...

Global site tag (gtag.js) - Google Analytics