PHP + AJAX for refreshing registration (Real-Time Detection with user names)

Most of the time, we register personal information online. after submitting the page, we have to wait for the page to refresh to tell us whether the registration is successful. When the network is poor, if you have registered a large string of things, after a long wait for the page to refresh, it is indeed "your user name has been used" or XXXXXXX is invalid, I think everyone is in a particularly bad mood. Today I will introduce a simple registration program that does not refresh registration on the AJAX implementation page + detects user information in real time. I hope it will help you. Okay. Check the registration page code first:

<Table width = "831" border = "0" align = "center" cellpadding = "0" cellspacing = "0">
<Tr style = "display: none">
<Td height = "35" align = "center" id = "result"> </td>
</Tr>
</Table>
<Table width = "100%" height = "256" border = "0" align = "center" cellpadding = "1" cellspacing = "1">
<Tr>
<Td width = "150" align = "left" bgcolor = "# FFFFFF"> · User name: </td>
<Td width = "310" align = "center" bgcolor = "# FFFFFF">
<Input name = "username" type = "text" class = "inputtext" id = "username">

<Font color = "# FF6633"> * </font> </td>
<Td align = "left" bgcolor = "# FFFFFF" id = "check"> 4-16 characters. It must be in lowercase, Chinese characters, numbers, or numbers. </Td>
</Tr>
<Tr>
<Td width = "150" align = "left" bgcolor = "# FFFFFF"> · User Password: </td>
<Td width = "310" align = "center" bgcolor = "# FFFFFF">
<Input name = "userpwd" type = "password" class = "inputtext" id = "userpwd">

<Font color = "# FF6633"> * </font> </td>
<Td align = "left" bgcolor = "# FFFFFF" id = "pwd"> password letters are case sensitive. 6-16 digits (including 6 and 16 digits. </Td>
</Tr>
<Tr>
<Td width = "150" align = "left" bgcolor = "# FFFFFF">. Duplicate password: </td>
<Td width = "310" align = "center" bgcolor = "# FFFFFF">
<Input name = "reuserpwd" type = "password" class = "inputtext" id = "reuserpwd">

<Font color = "# FF6633"> * </font> </td>
<Td align = "left" bgcolor = "# FFFFFF" id = "repwd"> enter the logon password again. </Td>
</Tr>
</Table>

Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "onclick =" if (! This. resized) {return true;} else {window. open ('HTTP: // leehui1983.bokee.com/photo/view.fcgi? Mode = 3 & id = 4108996 ');} "alt =" "src =" http://leehui1983.bokee.com/photo/view.fcgi? Method = 3 & id = 4108996 "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>

The red part is the js function to be called later. When a text box is selected, it will start to be called. Now let's look at the ajaxreg. the js File Code contains the ajax framework and some judgment functions.
Var http_request = false;
Function send_request (url) {// initialization, specifying the processing function and sending the request function
Http_request = false;
// Start initializing the XMLHttpRequest object
If (window. XMLHttpRequest) {// Mozilla Browser
Http_request = new XMLHttpRequest ();
If (http_request.overrideMimeType) {// sets the MIME category
Http_request.overrideMimeType ("text/xml ");
}
}
Else if (window. ActiveXObject) {// IE browser
Try {
Http_request = new ActiveXObject ("Msxml2.XMLHttp ");
} Catch (e ){
Try {
Http_request = new ActiveXobject ("Microsoft. XMLHttp ");
} Catch (e ){}
}
}
If (! Http_request) {// exception. An error occurred while creating the object instance.
Window. alert ("An error occurred while creating the XMLHttp object! ");
Return false;
}
Http_request.onreadystatechange = processrequest;
// Determine the request sending method, URL, and whether to execute the following code synchronously
Http_request.open ("GET", url, true );
Http_request.send (null );
}
// Function for processing the returned information
Function processrequest (){
If (http_request.readyState = 4) {// judge the object status
If (http_request.status = 200) {// The message is returned successfully. Start to process the information.
Document. getElementById (reobj). innerHTML = http_request.responseText;
}
Else {// The page is abnormal.
Alert ("the page you requested is abnormal! ");
}
}
}
Function usercheck (obj ){
Var f = document. reg;
Var username = f. username. value;
If (username = ""){
Document. getElementById (obj). innerHTML = "<font color = red> the user name cannot be blank! </Font> ";
F. username. focus ();
Return false;
}
Else {
Document. getElementById (obj). innerHTML = "reading data ...";
Send_request ('checkuserreg. php? Username = '+ username );
Reobj = obj;
}
}
Function pwdcheck (obj ){
Var f = document. reg;
Var pwd = f. userpwd. value;
If (pwd = ""){
Document. getElementById (obj). innerHTML = "<font color = red> the user password cannot be blank! </Font> ";
F. userpwd. focus ();
Return false;
}
Else if (f. userpwd. value. length <6 ){
Document. getElementById (obj). innerHTML = "<font color = red> the password length cannot be less than 6 characters! </Font> ";
F. userpwd. focus ();
Return false;
}
Else {
Document. getElementById (obj). innerHTML = "<font color = red> the Password meets the requirements! </Font> ";
}
}
Function pwdrecheck (obj ){
Var f = document. reg;
Var repwd = f. reuserpwd. value;
If (repwd = ""){
Document. getElementById (obj). innerHTML = "<font color = red> enter the password again! </Font> ";
F. reuserpwd. focus ();
Return false;
}
Else if (f. userpwd. value! = F. reuserpwd. value ){
Document. getElementById (obj). innerHTML = "<font color = red> the two passwords are inconsistent! </Font> ";
F. reuserpwd. focus ();
Return false;
}
Else {
Document. getElementById (obj). innerHTML = "<font color = red> the password is entered correctly! </Font> ";
}
}
It is not hard to see that data is asynchronously transmitted to checkuserreg. php then sends the return information to detect the user name in real time. As for the password, only the Real-Time Determination of the length is made. If you are interested, you can expand the function. Let's take a look at what checkuserreg. php has done:
<? Php
Header ('content-Type: text/html; charset = GB2312 '); // avoid output garbled characters
Include ('inc/config. inc. php'); // contains basic database configuration information
Include ('inc/dbclass. php'); // contains the database operation class
$ Username = trim ($ _ GET ['username']); // GET the Registration Name
// Configure //-----------------------------------------------------------------------------------
$ Db = new db; // generates an instance from the database operation class
$ Db-> mysql ($ dbhost, $ dbuser, $ dbpassword, $ dbname); // call the connection Parameter Function
$ Db-> createcon (); // call to create a connection Function
// Configure //-----------------------------------------------------------------------------------
$ Querysql = "select username from cr_userinfo where username = '$ username'"; // query the member name
$ Result = $ db-> query ($ querysql );
$ Rows = $ db-> loop_query ($ result );
// If the member name has been registered
// Configure //-----------------------------------------------------------------------------------
If ($ rows ){
Echo "<font color = red> This member name has been registered. Please change the member name! </Font> ";
}
// Display if the member name is not registered
// Configure //-----------------------------------------------------------------------------------
Else {
Echo "<font color = red> This member name can be registered! </Font> ";
}
If ($ action = reg ){
$ Addsql = "insert into cr_userinfo
Values (0, '$ username',' $ userpwd ',' $ time', 50, 1, '$ userquestion', '$ useranswer ')";

$ Db-> query ($ addsql );
Echo " <font color = red> congratulations! Registration successful! Click <a href = login. php> here </a> to log in! </Font> ";
}
$ Db-> close (); // close the database connection
?>
The comments are still detailed. You should be able to understand them. After reading the valid information, we submit the registration information to implement the PHP code for refreshing new registration. senduserinfo. php:
<? Php
Header ('content-Type: text/html; charset = GB2312 '); // avoid output garbled characters
Include ('inc/config. inc. php'); // contains basic database configuration information
Include ('inc/dbclass. php'); // contains the database operation class
$ Username = trim ($ _ GET ['username']); // GET the Registration Name
$ Userpwd = md5 (trim ($ _ GET ['userpwd']); // GET the registration Password
$ Time = date ("Y-m-d ");

// Configure //-----------------------------------------------------------------------------------
$ Db = new db; // generates an instance from the database operation class
$ Db-> mysql ($ dbhost, $ dbuser, $ dbpassword, $ dbname); // call the connection Parameter Function
$ Db-> createcon (); // call to create a connection Function
// Configure //-----------------------------------------------------------------------------------
// Start data insertion
// Configure //-----------------------------------------------------------------------------------
$ Addsql = "insert into cr_userinfo values (0, '$ username',' $ userpwd', '$ time', 50, 1,' $ userquestion ',' $ useranswer ')";
$ Db-> query ($ addsql );
Echo " <font color = red> congratulations! Registration successful! Click <a href = login. php> here </a> to log on! </Font> ";

$ Db-> close (); // close the database connection
?>
OK !! Let's take a look:
1.
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "onclick =" if (! This. resized) {return true;} else {window. open ('HTTP: // leehui1983.bokee.com/photo/view.fcgi? Mode = 3 & id = 4109258 ');} "alt =" "src =" http://leehui1983.bokee.com/photo/view.fcgi? Method = 3 & id = 4109258 "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>

2.
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "onclick =" if (! This. resized) {return true;} else {window. open ('HTTP: // leehui1983.bokee.com/photo/view.fcgi? Mode = 3 & id = 4109286 ');} "alt =" "src =" http://leehui1983.bokee.com/photo/view.fcgi? Method = 3 & id = 4109286 "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>

3.
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "onclick =" if (! This. resized) {return true;} else {window. open ('HTTP: // leehui1983.bokee.com/photo/view.fcgi? Mode = 3 & id = 4109299 ');} "alt =" "src =" http://leehui1983.bokee.com/photo/view.fcgi? Method = 3 & id = 4109299 "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>

4.
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "onclick =" if (! This. resized) {return true;} else {window. open ('HTTP: // leehui1983.bokee.com/photo/view.fcgi? Mode = 3 & id = 4109333 ');} "alt =" "src =" http://leehui1983.bokee.com/photo/view.fcgi? Method = 3 & id = 4109333 "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>

5.
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "onclick =" if (! This. resized) {return true;} else {window. open ('HTTP: // leehui1983.bokee.com/photo/view.fcgi? Mode = 3 & id = 4109336 ');} "alt =" "src =" http://leehui1983.bokee.com/photo/view.fcgi? Method = 3 & id = 4109336 "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>

How is it? It's not bad. It's so exhausting. I hope you like it ~~~~