一个AJAX登陆界面

最新推荐文章于 2022-04-25 22:00:46 发布

iteye_18369

最新推荐文章于 2022-04-25 22:00:46 发布

阅读量204

点赞数

分类专栏： WebProg 文章标签： Ajax PHP CSS 浏览器 MySQL

WebProg 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前段时间做了一个局部刷新的登录界面，先说说它吧。

登录界面，当然少不了的有两个输入框，和两个按钮：

<body>
	<div id="header">
		<input type="text" class="textbox" id="user" />
		<input type="password" class="textbox" id="pw" οnkeydοwn="if(event.keyCode==13) Login()" />
		<input type="button" value="Login" onClick="Login()" />
		<input type="button" value="Register" onClick="Register()" />
	</div>
	<div id="main">
	</div>
</body>

还没有写任何CSS内容。

在浏览器上预览一下，发现：

Google浏览器（Chrome）：

IE浏览器：

Opera：

呃……究竟什么浏览器好，我不做评论，我想要的，是给每个用户提供满意的体验。

那么，大小框问题就交给CSS吧：

<head>
	<link rel="stylesheet" type="text/css" href="../style.css" />
	<script type="text/javascript" src="../main.js"></script>
</head>

.textbox
{
	margin: 0px;
	padding: 0px;
	height: 22px;
	font-family: Arial,Helvetica,Sans-Serif;
	font-size: 14px;
}

再刷新，框都一样大了。然后是按钮的响应的问题。按照用户使用的过程来吧，首先是登记：

function Register()
{
	document.getElementById("main").innerHTML="Sending information...";
	var xmlHttp=getxmlHttp();
	xmlHttp.onreadystatechange=function()
	{
		if(xmlHttp.readyState==2||xmlHttp.readyState==3)
		{
			document.getElementById("main").innerHTML="Waiting for response...";
		}
		if(xmlHttp.readyState==4)
		{
			document.getElementById("main").innerHTML=xmlHttp.responseText;
		}
	}
	xmlHttp.open("GET","../elements/register.php",true);
	xmlHttp.send(null);
}

我一开始就想要避免登记过程中的任何刷新动作，所以选择了AJAX。一开始，是没有酱色的代码的。因为是在本机上测试，所以响应上根本没有问题。后来申请了美国那边一个免费空间和免费米，把文件放上去，才发现，及时响应是如此的重要：因为是AJAX，所以点击了Register之后，地址栏不会出现任何变化，相应的，网速造成的任何一毫秒的延迟，都会让用户以为是“点了没反应”或是“没点到”，这一点是不可取的。于是利用本机的脚本先输出一行“定心丸”，可以大大减少用户的不安：document.getElementById("main").innerHTML="Sending information...";

另一方面，也应该考虑到，如果主机响应时卡掉了，那么，xmlHttp.readyState==2||xmlHttp.readyState==3的情况也会出现，处理这种情况下的响应，也是有必要的。

再来预览一下：

Chrome：

IE：

Opera：

怪了，为什么只有Opera是Waiting for response...？试着删掉对xmlHttp.readyState==2||xmlHttp.readyState==3的处理第一行，三个浏览器都返回Sending information...了，具体原因，暂且不管。

<input type="text" class="textbox" id="user_reg" onChange="check_exist()" />
<input type="password" class="textbox" id="pw1_reg" />
<input type="password" class="textbox" id="pw2_reg" οnkeydοwn="if(event.keyCode==13) check_newplayer()" />
<input type="button" class="button" value="Click here to Regist!" onClick="check_newplayer()" />
<div id="reminder">
</div>

这些内容，直接写到register.php里面，就达到效果了：点击Register，出现提示，提示完了之后，就出现三个框（这些框都还没有标签，不过这些是CSS的事了）用于输入用户名、密码、确认密码。

接下来就是数据处理了：

function check_exist()
{
	document.getElementById("reminder").innerHTML="Checking...";
	var user=document.getElementById("user_reg").value;
	var xmlHttp=getxmlHttp();
	xmlHttp.onreadystatechange=function()
	{
		if(xmlHttp.readyState==4)
		{
			var res=xmlHttp.responseText;
			if(res!="Valid.")
			{
				document.getElementById("user_reg").value="";
			}
			document.getElementById("reminder").innerHTML=xmlHttp.responseText;
		}
	}
	url="../elements/check_exist.php?user="+user;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
}

当用户输入了用户名之后，会触发check_exist()函数用于判断用户名是否可行。

function check_newplayer()
{
	var user=document.getElementById("user_reg").value;
	var pw1=document.getElementById("pw1_reg").value;
	var pw2=document.getElementById("pw2_reg").value;
	if(user=="")
	{
		document.getElementById("reminder").innerHTML="<html><body>Please Enter a user name!</body></html>";
	}
	else
	{
		if(pw1!=pw2)
		{
			document.getElementById("reminder").innerHTML="<html><body>You must confirm your password correctly.</body></html>";
		}
		else if(pw1=="")
		{
			document.getElementById("reminder").innerHTML="<html><body>Please Confirm your password.</body></html>";
		}
		else
		{
			newplayer();
		}
	}
}

点击注册界面上的Register时，触发check_newplayer()函数，当用户输入了两次不同的密码、没有输入密码、没有输入用户名时，均不执行newplayer()函数，并给出相应的提示。

function newplayer()
{
	document.getElementById("reminder").innerHTML="Sending information...";
	var user=document.getElementById("user_reg").value;
	var pw=document.getElementById("pw2_reg").value;
	var ar=new Array();
	ar[0]=user;
	ar[1]=pw;
	var xmlHttp=getxmlHttp();
	xmlHttp.onreadystatechange=function()
	{
		if(xmlHttp.readyState==2||xmlHttp.readyState==3)
		{
			document.getElementById("main").innerHTML="Waiting for response...";
		}
		if(xmlHttp.readyState==4)
		{
			document.getElementById("main").innerHTML=xmlHttp.responseText;
		}
	}
	var url="../elements/newplayer.php?ar="+ar;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
}

通过了所有检查的数据被发送到主机，显示newplayer.php的返回值。

<?php
	$user=$_GET["user"];
	$con=mysql_connect("host","name","************");
	if($con==null)
	{
		die("failed in connecting server.");
	}
	$db=mysql_select_db("a4135357_catlaus",$con);
	if($db==null)
	{
		die("failed in connecting server.");
	}
	$sql="select * from users where user=\"".$user."\";";
	$result=mysql_query($sql,$con);
	$ar=mysql_fetch_array($result);
	if($ar["user"]!=$user)
	{
		die("Valid.");
	}
	else
	{
		die($ar["user"]." is already registed,you may choose another name or log in.");
	}
?>

这是check_exist.php其他的与之类似，都是SQL-php处理。不再一一列举。

接下来是排版。

按照我的习惯，会采用这样的结构：

<div class="verticaldecoration" style="height: auto;">
	<ul>
		<li>
			Name:
		</li>
		<li>
			PassWord:
		</li>
	</ul>
</div>
<div class="verticalboxes">
	<ul>
		<li>
			<input type="text" id="user" />
		</li>
		<li>
			<input type="password" id="password" />
		</li>
	</ul>
</div>

然后使两个 div向左 float，内里的 li向上浮动。最后只要调整padding和margin就达到目的了。但是仔细想想，这么做真有点多此一举的嫌疑，首先来说，只需要用一个两行两列的表格把它们框起来，左右对齐上的问题就彻底解决了。根本不必要考虑到不同浏览器对padding和margin的判断不一样导致的我在Chome下浏览起来相当正常的网页一般到IE下就乱透了的前车之鉴。

但是，为什么大家都首推用<div>结构呢？查了几篇Google，其他的我没看见，只记住了这些：<div>定义的网站结构扩展性比table要好，加载速度上table要慢一些。然而<div>结构却脱离不了CSS，不同的浏览器对CSS的解析，所以经常出现不同浏览器下网页不同的问题。

呵呵，看来还不是我一个人遇到这样的困难啊。那咱继续用<div>结构，先解决标签与文本框左右对齐的问题。总感觉把标签与文本框分开到两个<div>里面是多此一举，最好是能够把它们放到一个<ul>下面分占不同的<li>。

然后我就用这个方法达到了我先前用了n个<li>标签才达到的效果：

<div class="boxgroup">
	<ul>
		<span>name:</span>
		<input type="text" class="textbox" id="user" />
		<span>password:</span>
		<input type="password" class="textbox" id="pw" οnkeydοwn="if(event.keyCode==13) Login()" />
		<input type="button" value="Register" onClick="Register()" style="float: left;" />
		<input type="button" value="Login" onClick="Login()" style="float: right;" />
	<ul>
</div>

.boxgroup
{
	width: 300px;
}

.boxgroup ul
{
	list-style: none;
}

.boxgroup ul span
{
	float: left;
	width: 100px;
}

.boxgroup ul input
{
	float: right;
}

虽然，让我头疼的对齐问题依然存在。

对了，我为什么一直当<ul>标签不存在似地：

.boxgroup ul
{
	margin: 0px;
	padding: 0px;
	list-style: none;
	height: 30px;
}
<div class="boxgroup">
	<ul>
		<span>name:</span>
		<input type="text" class="textbox" id="user" />
	</ul>
	<ul>
		<span>password:</span>
		<input type="password" class="textbox" id="pw" οnkeydοwn="if(event.keyCode==13) Login()" />
	</ul>
	<ul>
		<input type="button" value="Register" onClick="Register()" style="float: left;" />
		<input type="button" value="Login" onClick="Login()" style="float: right;" />
	</ul>
</div>

然后就解决了左右对齐的问题了（三种浏览器中表现一致）：

好了。这个登录界面仅为练习AJAX用，别无他意。做好了，于是就可以删了。

到现在为止，学习了这么多写网页的知识，我还是实实在在地写一个网页吧。一开始所想的规划ikarworld里的各种工人的数量的工具，现在看来，没有实用性。还不如写一个可以获取全部世界地图信息的网页呢。

那么，这样的网站的实现，必不可少的就是读取指定地址上的信息的方法。记得曾经见过“小偷程序”的字样，或许会有用：

找到了，就是这个file_get_contents()函数：

<?php

            $url="http://www.google.cn";

            $fcontents=file_get_contents($url);

            echo $fcontents;

?>

这样，我的网站就变成了没有图片的Google（地址栏是我的地址而非google.cn）。

那么，怎样从字符串中替换指定字符？

左右找了许多函数，最后落在preg_mach()函数的正则表达式上。

那好了，今天到此为止。

iteye_18369

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个AJAX登陆界面

前段时间做了一个局部刷新的登录界面，先说说它吧。登录界面，当然少不了的有两个输入框，和两个按钮：&lt;body&gt; &lt;div id="header"&gt; &lt;input type="text" class="textbox" id="user" /&gt; &lt;input type="password&
复制链接

扫一扫

专栏目录