매우 실 용적 인 ajax 사용자 등록 모듈

9927 단어 ajax책.
사이트 디자인 에서 ajax 기술 의 사용 은 이미 보편화 되 었 습 니 다.특히 상호작용 사이트 에서 ajax 기술 은 더욱 없어 서 는 안 됩 니 다.거의 모든 상호작용 사이트 응용 에서 ajax 의 기술 을 볼 수 있 습 니 다.대형 사이트,예 를 들 어 회원 의 등록,소형 사이트,예 를 들 어 새로 고침 이 없 는 페이지 기술 등 은 사이트 조회 자 에 게 더욱 좋 은 사용자 체험 을 제공 합 니 다.국부 사이트 디자인 에서만약 에 특정한 부분 을 조회 하 는 데 오류 가 발생 하면 전체 웹 페이지 를 새로 고침 하지 않 아 도 되 고 가장 광범 위 하 게 응용 되 는 부분 은 회원 이 등록 한 새로 고침 검증 이 없 는 등 새로 고침 이 없 는 페이지,새로 고침 이 없 는 조회 가 더 많 고 새로 고침 이 없 는 조회 데이터 베이스 에 내용 이 존재 하 는 지 등 이다.

다음은 ajax 의 사용자 등록 모듈 입 니 다.이 ajax 등록 모듈 은 실 용적 입 니 다.여러분 은 자신의 수요 에 따라 확장 하면 됩 니 다.check.phop 이 파일 은 조회 한 데이터 의 파일 입 니 다.안에 조회 한 내용 을 자신의 것 으로 바 꾸 면 됩 니 다.쉽게 알 수 있 을 것 입 니 다.필요 한 것 이 있 으 면 다운로드 검증 을 할 수 있 습 니 다.
check.php

<?php
header("Content-Type:text/html;charset=gb2312");
@mysql_connect('localhost','root','ebaeba') or die("          ");
@mysql_select_db("test") or die("          ");



$uname = $_GET['userName'];
//         　　           
//            



$sql="select * from t1 where name='".$uname."'";
$query=mysql_query($sql);
$row=mysql_fetch_object($query);

if(strlen($uname)<6||strlen($uname)>20)
{
 $msg="      6 20   .";
}
else
{
 
 if($row==false)
 {
  $msg="      ，    ！";
 }
 else
 {
  $msg="   ，        ，        !";
 }
}
echo $msg ;
?>
reg.php

<%@page language="java" contentType="text/html;charset=gb2312"%>
<! DOCTYPE HTML PUBLIC　"-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html140/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>AJAX        </title>
<script language="javascript" type="text/javascript">
<!--
//    
function createXMLHTTP() 
{
 var request;
 var browser = navigator.appName;
 //  IE，   XMLHttp  
 if(browser == "Microsoft Internet Explorer") 
 {
 var arrVersions = ["Microsoft.XMLHttp", "MSXML2.XMLHttp.4.0",
  "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp","MSXML2.XMLHttp.5.0"];
 for (var i=0; i < arrVersions.length; i++) 
 {
  try 
  {
 //              XMLHttp  
  request = new ActiveXObject(arrVersions[i]); 
  return request;
  } 
  catch (exception)
  {
  //  ，  
  }
 }
 }
 else
 {
 //      XMLHttpRequest  
 request = new XMLHttpRequest(); 
 if(request.overrideMimeType)
 {
 　　 request.overrideMimeType('text/xml');
 　 }
 return request;
 } 
}
//  XMLHTTP      
var http = createXMLHTTP();
//    
function chkUser()
{
 var url = "check.php"; //  "CheckUserName" ServLet
 var name = document.getElementById("userName").value; 
 url += ("?userName="+escape(name)+"&oprate=chkUser");
 http.open("GET",url,true);
 http.onreadystatechange = ProcessHttpResponse;
 http.send(null);
 return ;
}
//    
function ProcessHttpResponse()
{
 if(http.readyState == 4)
 {
 if(http.status == 200)
 {
 　 var xmlDocument = http.responseXML;
 　 if(http.responseText!="      ，    ！")
  {
 //         
 　　 document.getElementById("showStr").style.display = "";
 　　 document.getElementById("userName").style.background= "#FF0000";
 　　 document.getElementById("showStr").innerText = http.responseText;
 　 }
  else
  {
 　　 document.getElementById("userName").style.background= "#FFFFFF";
 　　 document.getElementById("showStr").style.display = "";
  document.getElementById("showStr").innerText = http.responseText;
 　 }
 }
 else
 {
 　　 alert("           ，             ！");
 　　 alert(http.status);
 }
 }
}
//      
function chkpassword()
{
 var m=document.form1;
 if(m.password.value.length>20 || m.password.value.length<6 )
 {
 document.getElementById("passwordStr").style.display = "";
　 document.getElementById("password").style.background= "#FF0000";
　 document.getElementById("passwordStr").innerText = "   ,         、      ，   6~20!";
 }
 else
 {
　 document.getElementById("password").style.background= "#FFFFFF";
　 document.getElementById("passwordStr").style.display = "none";
 }
}
//          
function chkconfirmPassword()
{
 var m=document.form1;
　 if (m.password.value != m.confirmPassword.value)
　 {
　　 document.getElementById("confirmPasswordStr").style.display = "";
　　 document.getElementById("confirmPassword").style.background= "#FF0000";
　　 document.getElementById("confirmPasswordStr").innerText = "   ,          !";
　 }
　 else
　 {
　　 document.getElementById("confirmPassword").style.background= "#FFFFFF";
　　 document.getElementById("confirmPasswordStr").style.display = "none";
　 }
} 
//  Email    
function chkEmail()
{
 var m=document.form1;
 var email = m.email.value; 
 //     
　 var regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; 
　 var flag = regex.test(email);   
　 if(!flag) 
　 {
  document.getElementById("emailStr").style.display = "";
　　 document.getElementById("email").style.background= "#FF0000";
　　 document.getElementById("emailStr").innerText = "   ,      ！"; 
　 } 
　 else 
　 { 
  document.getElementById("email").style.background= "#FFFFFF";
　　 document.getElementById("emailStr").style.display = "none"; 
　 }
 
}
//       
function SubmitCheck()
{
 var m=document.form1; 
 if(m.userName.value.length==0)
 {
　 alert("   ,          、      ，   5~20。");
　 m.userName.focus();
　 return false;
 }
 if(m.password.value.length==0)
 {
　 alert("   ,         、      ，   5~20。");
　 m.password.focus();
　 return false;
 }
 if (m.password.value != m.confirmPassword.value)
 {
　 alert("   ,          !");
　 m.confirmPassword.focus();
　 return false;
 } 
 if(m.email.value.length==0)
 {
　 alert("   ,        ！！");
　 m.email.focus();
　 return false; 
 }
 m.submit();
}
//--> 
</script>
<body >
<form name="form1" method="post" action="register.php">
<h3 align="center">Ajax      </h3>
<table align="center" width="500" border="1" >
 <tr>
 <td><font color="red">*</font></td>
 <td width="100">    :</td>
 <td><input type="text" name="userName" maxlength="20" style="background=#FFFFFF" onBlur="chkUser()"></td>
 <td><div id="showStr" style="background-color:#FF9900;display:none"></div></td>
 </tr>
 <tr>
 <td><font color="red">*</font></td>
 <td>    :</td>
 <td align="left"><input type="password" name="password" maxlength="22" style="background=#FFFFFF" onBlur="chkpassword()"/> </td>
 <td><div id="passwordStr" style="background-color:#FF9900;display:none"></div></td>
 </tr>
 <tr>
 <td><font color="red">*</font></td>
 <td>    :</td>
 <td><input type="password" name="confirmPassword" maxlength="20" style="background=#FFFFFF" onBlur="chkconfirmPassword()"/></td>
 <td><div id="confirmPasswordStr" style="background-color:#FF9900;display:none"></div></td>
 </tr>
 <tr>
 <td><font color="red">*</font></td>
 <td>Email:</td>
 <td><input type="text" name="email" maxlength="100" style="background=#FFFFFF" onBlur="chkEmail()"></td>
 <td><div id="emailStr" style="background-color:#FF9900;display:none"></div></td>
 </tr>
</table>
<div align="center"> 
 
　 <input type="button" name="ok" value="    " onClick="SubmitCheck()">
　 <input type="reset" name="reset" value="    ">
 </form>
</div>
</body>
</html>
원본 다운로드:ajax 사용자 등록 모듈
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
ajax 요청 기술
Ajax+div 의'왼쪽 메뉴,오른쪽 내용'페이지 효과 구현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage