一 代码
fun.js
function chkUsername(username){
if(username==''){ //判断用户名是否为空
alert('请输入用户名！');
}else{
var xmlObj; //定义XMLHttpRequest对象
if(window.ActiveXObject){ //如果是浏览器支持ActiveXObjext则创建ActiveXObject对象
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){ //如果浏览器支持XMLHttpRequest对象则创建XMLHttpRequest对象
xmlObj = new XMLHttpRequest();
}
xmlObj.onreadystatechange = callBackFun; //指定回调函数
xmlObj.open('GET', 'chk.php?username='+username, true); //使用GET方法调用chk.php并传递username参数的值
xmlObj.send(null); //不发送任何数据，因为数据已经使用请求URL通过GET方法发送
function callBackFun(){ //回调函数
if(xmlObj.readyState == 4 && xmlObj.status == 200){ //如果服务器已经传回信息并没发生错误
if(xmlObj.responseText=='y'){ //如果服务器传回的内容为y，则表示用户名已经被占用
alert('该用户名已被他人使用！');
}else{ //不为y，则表明用户名未被占用
alert('恭喜，该用户未被使用！');
}
}
}
}
}
chk.php
<?php
require_once 'conn.php'; //包含数据库连接文件
$sql = mysql_query("select id, username from tb_user where username='".trim($_GET['username'])."'", $connID); //执行查询
$result = mysql_fetch_array($sql);
if ($result) { //判断用户名是否存在
echo 'y';
} else {
echo 'n';
}
?>
conn.php
<?php
$host = '127.0.0.1';
$userName = 'root';
$password = 'root';
$connID = mysql_connect($host, $userName, $password);
mysql_select_db('db_database27', $connID);
mysql_query('set names gbk');
?>
index.php
<!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=gb2312" />
<title>Ajax检测用户名</title>
</head>
<script language="javascript" src="js/fun.js"></script>
<body>
<h2>Ajax检测用户名</h2>
<form name="form_register">
用户名：<input type="text" id="username" name="username" size="20" /> <input type="button" value="查看用户名是否被占用" onclick="javascript:chkUsername(form_register.username.value)" />
</form>
</body>
</html>
二 运行结果
相关推荐
在用户注册场景中，利用Ajax检测用户名是否已注册，可以避免用户输入后点击提交按钮，然后等待服务器响应的漫长过程，大大提升了用户体验。 首先，我们需要理解Ajax的工作原理。Ajax的核心是XMLHttpRequest对象，它...
在本教程中，我们将探讨如何利用AJAX（Asynchronous JavaScript and XML）技术来检测用户名是否重复，以提升用户体验，避免用户在提交表单后才收到用户名已存在的错误提示。 首先，让我们理解什么是AJAX。AJAX是一...
在Web开发中，Ajax被广泛应用于实现页面的异步交互，提高用户体验，例如实时验证用户输入，如本例中的“检测用户名是否存在”。下面我们将深入探讨如何使用Ajax来实现这一功能，并结合Eclipse开发环境进行详细讲解。...
在现代Web应用中，用户体验的重要性不言而喻。"Ajax用户注册检查用户名"是一个关键功能，它使得用户在注册时可以实时验证所选用户名是否已存在，无需每次提交表单后等待服务器返回完整页面的刷新。这个过程涉及到...
在这个场景中，当用户在输入框中输入用户名时，我们可以监听输入事件，一旦检测到内容变化，就触发一个Ajax请求，将用户名发送到服务器进行检查。 首先，我们需要在HTML中创建一个输入框和一个按钮，用于用户输入...
在“用jquery实现ajax检测用户名”的场景中，我们可以设想一个注册页面，用户输入用户名后，后台系统实时检查该用户名是否已被占用。以下是实现这一功能的基本步骤： 1. **HTML 结构**：创建一个输入框让用户输入...
【用户名检测(AJAX+PHP)】是一种常见的前端与后端交互技术，用于实时验证用户输入，例如在注册或登录过程中检查用户名是否已存在。在这个示例程序中，AJAX（异步JavaScript和XML）被用来实现无刷新的通信，而PHP作为...
在本文中，我们将深入探讨如何使用PHP和Ajax技术来实现一个简单的实时检测用户名是否可用的功能。这个功能在很多用户注册或登录系统中都非常常见，它允许用户在输入用户名时即时检查该名称是否已经被其他用户使用。 ...
【标题】中的"AJAX应用实例之检测用户名是否唯一"是指使用AJAX技术来实现实时验证用户在注册或登录时输入的用户名是否已经被其他人占用的功能。AJAX（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的...
2. 实时检测应用实例：文档中提到了利用Ajax技术实现用户名和邮箱的实时检测，即当用户在网页上的输入框中输入信息时，页面不需要重新加载，通过Ajax请求即可将信息发送到服务器，并接收服务器的响应结果。...
如果服务器返回的数据表明用户名可用，它会在`<span>`元素中显示“用户名可用”，反之则显示“用户名已存在”。如果出现网络问题，它会显示“网络错误，请重试”。 最后，我们需要创建PHP脚本来处理来自前端的请求...
在网页开发中，AJAX（Asynchronous JavaScript and XML）技术被广泛用于实现无刷新页面更新，从而提升用户体验。"AJAX无刷新验证用户名是否存在"是一个典型的应用场景，它允许用户在输入用户名时实时检查该用户名...
在现代Web开发中，AJAX（Asynchronous JavaScript and XML）技术是实现页面无刷新更新的重要手段。本示例关注的是利用AJAX进行异步注册时，检查用户名是否已存在的功能。这一过程通常涉及前端交互、服务器端处理以及...
【Ajax】是提高Web应用程序响应性和交互性的关键技术，它在本系统中的应用有： 1. 实时聊天：通过定期向服务器发送请求，获取最新的聊天记录，保持聊天界面的实时更新。 2. 用户输入检测：在用户输入消息时，预览...
Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个页面的情况下，能够更新部分网页的技术，它使得Web应用更为交互性和响应性。 首先，我们来看`ajax.html`。这个文件通常包含HTML表单，用于收集用户的...
总之，PHP+Ajax无刷新验证用户名的操作实例，演示了Web应用中前后端技术的交互协作。通过Ajax实现数据的异步交换，PHP负责处理逻辑和数据存储，二者结合实现了高效、动态的Web应用体验。随着前端技术的不断进步，...
在本示例中，我们将探讨如何利用jQuery的AJAX技术来实时检测用户在注册时输入的用户名是否已存在于系统中，从而提供一个更流畅的用户体验。 首先，我们需要一个HTML页面（例如`grade.htm`），在这个页面中，用户...
在用户名验证场景中，当用户输入用户名后，前端会使用JavaScript检测输入，并通过Ajax调用后台接口进行验证。 Ajax的核心是XMLHttpRequest对象，它负责在后台运行，与服务器通信。以下是一个简单的Ajax请求示例： ...
本文主要介绍如何在ThinkPHP框架中使用Ajax实现用户名校验功能。我们将详细探讨从用户输入获取到数据，再到后端校验，以及返回校验结果的整个流程。 首先，用户在前端的注册页面中输入用户名，并通过JavaScript函数...