js中ajax测试练习

最新推荐文章于 2022-07-19 17:31:40 发布

weixin_34384557

最新推荐文章于 2022-07-19 17:31:40 发布

阅读量142

点赞数

文章标签： xhtml python javascript ViewUI

原文链接：https://my.oschina.net/xiahuawuyu/blog/65224

版权

2019独角兽企业重金招聘Python工程师标准>>>

测试的时候，首先需建立这个文件username.txt且里面写入用户名（用户明以“；”分开），将文件放在相同目录文件中访问即可.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax测试练习</title>
	<script type="text/javascript" language="JavaScript">
		//定义XMLHttpRequest对象的变量
		var xmlHttp = null;
		//创建XMLHttpRequest对象
		function createXMLHTTP()
		{
			//判断浏览器是否支持ActiveX控件       此处是检测IE浏览器的
			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]);
			   			//如果创建成功则跳出循环
			   			break;
			   		}
			   		catch(ex)
			   		{
			   			
			   		}
			     }
			} 
			//判断浏览器是否将XMLHttpRequest作为本地对象实现     同样也是判断其他浏览器的
			else if(window.XMLHttpRequest)
			{
				xmlHttp = new XMLHttpRequest();
			}
		}
			//相应XMLHttpRequest对象变化状态的函数e
			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(var 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()
			{
				//创建XMLHttpRequset对象
				createXMLHTTP();
				if(xmlHttp !=null)
				{
					//创建响应XMLHttpRequest对象的函数
					xmlHttp.onreadystatechange = httpStateChange;
					
					//创建http请求
					xmlHttp.open("get","username.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="true"/>
		
	</form>
</body>
</html>

转载于:https://my.oschina.net/xiahuawuyu/blog/65224