<script type="text/javascript">
var xhr ;
//初始化 xhr 对象
// return value : 1 : IE , 2 , Mozila , 0 : create xhr error ;
function createXHR(){
//1,创建xhr 对象 .
if( window.ActiveXObject ){
xhr = new ActiveXObject( "Microsoft.XMLHTTP" ) ;
return 1 ;
}else if( window.XMLHttpRequest ){
xhr = new XMLHttpRequest();
return 2 ;
}else{
return 0 ;
}
}
//////////// 用户名是否存在 ////////////////////
//将用户填写的用户名发送到服务器端
function checkUserName(){
var ret = createXHR();
if( ret == 0 ){
alert( "create xhr error" ) ;
}else{
//在xhr中注册用于处理应答的函数(handleCheck)
xhr.onreadystatechange = handleCheck ;
/*
//使用Get方式向服务器发送请求 .
var url = makeQueryString( "/ajax/reg.jsp" );
xhr.open( "get" , url ) ;
xhr.send( null );
*/
//通过Post 形式向服务器发送数据 .
var url = "需要处理的action的地址" ;
xhr.open( "post" , url ) ;
xhr.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" ) ;
xhr.send( makeQueryString( null ) ) ;
}
}
//在指定的URL上添加参数
function makeQueryString( url ){
var name = document.getElementById( "nameId" ).value ;
var queryString ;
if( url == null ){
return "name=" + name ;
}else{
return url + "?name=" + name ;
}
}
function handleCheck(){
//通信进程结束 .
//readyState : 1: 初始化阶段 2 :连接建立阶段 3 : 通信中阶段 4 : 通信结束
if( xhr.readyState == 4 ){
//status==200,表示服务器运行正常
if( xhr.status == 200 ){
processResult();
}else if(document.getElementById( "nameId" ).value==""){
document.getElementById( "nameId2" ).firstChild.nodeValue="用户名不能为空";
document.getElementById( "nameId2" ).color="red";
}
}
}
function processResult(){
//取得应答内容 ,把应答内容显示示在网页上
var span = document.getElementById( "msgId" ) ;
span.innerHTML = xhr.responseText ;
}
<script>
分享到:
相关推荐
本教程将深入讲解如何使用AJAX实现用户登录和注册功能,这对于初学者来说是一个很好的起点。 首先,我们需要理解AJAX的基本结构。一个基本的AJAX调用通常涉及以下步骤: 1. 创建XMLHttpRequest对象:这是AJAX的...
总结来说,"Ajax实现用户注册"涉及了JavaScript基础、Ajax通信、HTTP请求响应、JSON数据交换、前端验证与服务器端验证、以及特定框架如ASP.NET AJAX的使用。通过这些技术,我们可以构建一个高效、实时反馈的用户注册...
10. **兼容性**:考虑到不同的浏览器和设备,应确保使用跨浏览器的Ajax实现,例如使用jQuery库中的`$.ajax()`方法,它可以处理不同浏览器之间的差异。 通过以上步骤,我们可以构建一个高效、用户友好的Ajax驱动的...
通过上述分析,我们可以看到,利用Ajax实现数据验证,不仅可以提升用户体验,还可以减轻服务器负担,提高整体系统的响应速度和效率。然而,这也对开发者提出了更高的要求,需要熟练掌握JavaScript、HTML、CSS以及...
本教程主要关注如何利用Ajax实现用户名的实时验证,这对于用户注册功能至关重要,能有效防止用户输入已存在的用户名。教程适合初学者学习,其中包含了Oracle数据库的使用,所有注释详细易懂。 首先,我们需要理解...
【Ajax实现用户登录】知识点详解 在Web应用中,用户登录是常见的功能模块,而Ajax(Asynchronous JavaScript and XML)技术的引入,极大地提升了用户体验,实现了页面无刷新的数据交互。在"Ajax验证用户名是否已经...
本文将深入探讨如何使用Ajax实现用户登录验证,这是一个常见的需求,特别是在现代Web应用中。用户输入用户名和密码后,无需刷新整个页面,即可实时检查其有效性。 一、Ajax基础 Ajax的核心是JavaScript的...
在本文中,我们将深入探讨如何使用Ajax技术实现一个简单的登录验证功能。Ajax,即Asynchronous JavaScript and XML(异步JavaScript和XML),允许我们在不刷新整个网页的情况下与服务器进行交互,从而提供更流畅的...
**标题解析:** "AJAX实现注册验证的例子" 这个标题表明了我们要探讨的是一个使用AJAX技术来实现用户注册时的实时验证的示例。在网页应用中,AJAX(Asynchronous JavaScript and XML)允许我们在不刷新整个页面的...
总的来说,JS+Ajax实现用户注册验证的关键步骤包括:前端收集用户数据、阻止表单默认提交、创建XMLHttpRequest对象、设置请求参数、发送请求,以及处理服务器返回的响应。通过这种方式,我们可以提供即时的反馈,...
"利用Ajax实现无刷新验证用户名和密码是否正确"这一技术就是为了让用户在输入登录信息时能够得到即时反馈,无需等待页面整体刷新,极大地提升了交互体验。Ajax(Asynchronous JavaScript and XML)是一种创建动态...
在“JQuery+AJAX实现用户名验证”的场景中,我们通常会遵循以下步骤: 1. **前端准备**:在HTML页面中,我们需要一个输入框让用户输入用户名,以及一个按钮触发验证。例如: ```html 请输入用户名"> 验证 ``` 2. **...
AJAX实现用户登录注册(Struts+Spring+Hibernate+Ajax框架) AJAX实现用户登录注册(Struts+Spring+Hibernate+Ajax框架) AJAX实现用户登录注册(Struts+Spring+Hibernate+Ajax框架)
本篇将深入讲解如何利用Ajax实现登录验证,以及它如何使得页面不刷新就能完成用户登录。 一、Ajax基础 Ajax的核心是JavaScript对象XMLHttpRequest,它允许JavaScript与服务器进行异步数据交换。通过创建...
在现代Web应用中,Ajax(Asynchronous JavaScript and XML)技术被广泛用于实现用户登录功能,以提供更加流畅和无刷新的用户体验。Ajax允许在后台与服务器进行数据交换,而无需重新加载整个网页。本篇文章将深入探讨...
Ajax在用户认证过程中的应用主要体现在登录验证上。当用户尝试登录时,前端可以通过Ajax向后端发送用户名和密码,后端进行验证后返回结果,而前端则根据结果更新UI,如显示登录成功或失败的信息,所有这些操作都在...
总的来说,Struts2和Ajax的结合使用使得Web应用能够提供更快速、更直观的用户交互,而这个代码和jar包组合可能就是实现这一目标的一个实例。通过阅读提供的文档和使用示例,你可以深入了解并实践这一技术,从而提升...
总的来说,Ajax验证是提升用户注册表单体验的有效手段,它结合了前端和后端的能力,实现了数据验证的无缝集成,既保证了数据的准确性,又提供了流畅的用户体验。在实际开发中,还需要考虑兼容性、安全性(防止XSS和...
总的来说,Java和JSP结合Ajax实现表单验证,需要前端和后端的紧密协作。前端负责发送请求和处理响应,后端负责接收请求并进行业务逻辑处理。这样的组合既保证了用户体验,又实现了数据的有效验证。对于初学者来说,...
【标题】"纯AJAX实现用户名验证"涉及的是在Web开发中使用JavaScript和Ajax技术进行实时用户输入验证的方法。Ajax(Asynchronous JavaScript and XML)允许网页在不重新加载整个页面的情况下与服务器交换数据并更新...