Shulou(Shulou.com)06/03 Report--

This article shows you how to use AJAX for real-time detection of registered users, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

The refresh-free mechanism of AJAX enables the detection of registered names in the registration system to be displayed immediately.

The common user registration is that the user enters the user name, and the background program detects whether the user name is duplicated in the database and gives the hint of success and failure of registration (when the user registers with the same name, it will return to re-register), or a little humanized is to add a detection button after the user name text box to let the user detect it before registering.

The above operations, for the user experience is relatively "poor", a good user experience is: when the user has entered the registered user name, the Web system should be able to immediately check and display, and check and display without affecting the operation of the current page. This is the requirement of "getting data asynchronously", and this is the strength of AJAX.

For example, the following example shows this feature of AJAX:

Http://www.cnbruce.com/test/ajax/t1.htm

When entering an existing user name (such as cnbruce, cnrose), the page will show that the duplicate name cannot be registered (false), otherwise it will show that it can be registered (true), which provides a quick reference for user registration and the user experience is paramount.

So let's talk about how to achieve this function.

In fact, through the source code of t1.htm above, you can see the essence of AJAX.

The first step is to 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 ()

}

Then there are custom functions.

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 this function is to get the content of cu.asp asynchronously. Before that, it will extract the value of the current page form element "u_name", that is, the user name text box zhogn, and get different results (true or false) through the parameters and assignments after cu.asp.

So what we want to say here is cu.asp, whose main function is to accept the value of the URL parameter name for content display, which is eventually obtained asynchronously by t1.htm.

How to display the information obtained asynchronously on the current page?

Function updatePage () {

If (xmlHttp.readyState < 4) {

Test1 [XSS _ clean] = "loading..."

}

If (xmlHttp.readyState = = 4) {

Var response = xmlHttp.responseText

Test1 [XSS _ clean] = response

}

}

The readyState in xmlHttp.readyState indicates the progress of the server in processing the request. The values are 0-4, each with its own description.

Use the innerHTML in DHTML to display information on whether the defined can be registered.

The above content is how to use AJAX for real-time detection of registered users. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.