AJAX applications registered users instant detection

Source: Internet
Author: User
Tags sql return
The no-flush mechanism of AJAX AJAX enables the detection of registered names to be displayed instantly in the registration system.

Common user registration is user input user name, the background program detects whether the user name in the database is duplicated and makes a sign of success and failure (when the user registers the duplicate will return to register), or a little humanization is to add a detection button after the User Name text box, let the user detect and then do registration.

The above operation, for the user experience is more "bad", a good user experience is: When the user entered the user name, the web system should be able to immediately check and real-time display, and check and display without affecting the current page operation. This is the requirement to "get data asynchronously," which is the strength of Ajax

function display

When you enter a user name that already exists (such as Cnbruce, Cnrose), the page will display a duplicate that cannot be registered (FALSE), otherwise the display can be registered (TRUE), which provides a quick reference to the user's registration and the user experience is supreme.

So here's how to implement this function.

In fact, as the t1.htm source code, you can see the essence of Ajax

First, define the XMLHTTP object

var xmlHttp = false;
try {
XmlHttp = new ActiveXObject ("Msxml2.xmlhttp");
catch (e) {
try {
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
} catch (E2) {
XmlHttp = false;
}
}
if (!xmlhttp && typeof xmlhttprequest!= ' undefined ') {
XmlHttp = new XMLHttpRequest ();
}
For a description of this section, please see

Next is the Custom function

function CallServer () {
var u_name = document.getElementById ("U_name"). Value;
if ((U_name = null) | | (U_name = "")) Return
var url = "Cu.asp?name=" + Escape (u_name);
Xmlhttp.open ("Get", url, True);
Xmlhttp.onreadystatechange = Updatepage;
Xmlhttp.send (NULL);
}
The main function of the function is to get the contents of the cu.asp asynchronously, before this will extract the current page form element "U_name" that is the User Name text box Zhogn value, by cu.asp parameters and assignment after the different results (true or false).

So here is the cu.asp, his main function is to accept the URL parameter name value to do content display, the content is t1.htm asynchronous acquisition.


<!--Cu.asp's source code example-->

<!--#include file= "conn.asp"-->
<%
Name=request.querystring ("name")
Set rs = Server.CreateObject ("ADODB.") Recordset ")
sql = "SELECT * from U_ser where u_name= '" &name& ""
Rs. Open sql,conn,1,1
If rs.eof and Rs.bof then
Response.Write ("true")
Else
Response.Write ("false")
End If
Rs.close
Set rs=nothing
Call CloseDatabase
%>
How do I display the information I get asynchronously on the current page?

function Updatepage () {
if (Xmlhttp.readystate < 4) {
Test1.innerhtml= "Loading ...";
}
if (xmlhttp.readystate = = 4) {
var response = Xmlhttp.responsetext;
Test1.innerhtml=response;
}
}
The readystate in xmlhttp.readystate indicates the progress of the server in processing the request, with a value of 0-4, each with its own description, please refer to

Use innerHTML in DHTML to display information in the defined <span id= "test1" > whether it can register </span>. Sample program Download Address: Http://www.joycar.com.cn/blog/attachments/month_0607/y20067221811.rar


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.