Real-time form verification with Ajax

Source: Internet
Author: User
Recently, the hot topic on the internet is of course about the application of Web2.0, among which Ajax is one of the core of Web2.0. Ajax is short for Asynchronous JavaScript and XML. It is not a new language or technology. It is actually a combination of several technologies to play their respective roles in the collaboration of the same community. It includes
Use XHTML and CSS for standardized rendering;
Use dom for Dynamic Display and interaction;
Use XML and XSLT for data exchange and processing;
Use XMLHttpRequest for asynchronous data reading;
Finally, use JavaScript to bind and process all data;
The working principle of AJAX is equivalent to adding an intermediate layer between the user and the server, so that user operations and server responses are asynchronous. In this way, the previous server workload is transferred to the client, which facilitates the idle processing capability of the client to reduce the burden on the server and bandwidth, this saves ISP space and bandwidth rental costs.
We use two examples to verify whether a Pass account exists to describe the actual application of Ajax:
(1) return the server response using a text string to verify the existence of the Netease Pass account;
(2) return a response as an xmldocument object to verify whether the Kingsoft Pass account exists;

First, we need to use JavaScript to create the XMLHttpRequest class to send an HTTP request to the server. The XMLHttpRequest class is first introduced by Internet Explorer as an ActiveX object, called XMLHTTP. Later, Mozilla, Netscape, Safari, and other browsers also provided the XMLHttpRequest class, but they had different methods to create the XMLHttpRequest class.

For Internet Explorer, the method for creating XMLHttpRequest is as follows:

Xmlhttp_request = new activexobject ("msxml2.xmlhttp. 3.0"); // 3.0 or 4.0, 5.0
Xmlhttp_request = new activexobject ("msxml2.xmlhttp ");
Xmlhttp_request = new activexobject ("Microsoft. XMLHTTP ");

XMLHTTP versions may be different in different Internet Explorer browsers. To better be compatible with different versions of Internet Explorer browsers, we need to create the XMLHttpRequest class based on different versions of Internet Explorer browsers.CodeIt is the method for creating the XMLHttpRequest Class Based on Different Internet Explorer browsers.

For Mozilla, Netscape, Safari, and other browsers, the method for creating XMLHttpRequest is as follows:

Xmlhttp_request = new XMLHttpRequest ();

Some Mozilla browsers may not work properly if the server's response does not contain the XML mime-type header. To solve this problem, if the server response header is not text/XML, you can call other methods to modify the header.

Xmlhttp_request = new XMLHttpRequest ();
Xmlhttp_request.overridemimetype ('text/xml ');

In practical applications, to be compatible with browsers of different versions, the method for creating the XMLHttpRequest class is generally written as follows:

try {
If (window. activexobject) {
for (VAR I = 5; I --) {
try {
if (I = 2) {
xmlhttp_request = new activexobject ("Microsoft. XMLHTTP ");
}else {
xmlhttp_request = new activexobject (" msxml2.xmlhttp. "+ I + ". 0 ");
}< br> xmlhttp_request.setrequestheader (" Content-Type "," text/XML ");
xmlhttp_request.setrequestheader (" Content-Type ", "gb2312");
Break ;}< br> catch (e) {
xmlhttp_request = false;
}< BR >}else if (window. XMLHttpRequest) {
xmlhttp_request = new XMLHttpRequest ();
If (xmlhttp_request.overridemimetype) {
xmlhttp_request.overridemimetype ('text/xml ');
}< BR >}catch (e) {
xmlhttp_request = false;
}

After defining how to handle the response, you need to send the request. You can call the open () and send () Methods of the HTTP request class as follows:

Xmlhttp_request.open ('get', URL, true );
Xmlhttp_request.send (null );

The first parameter of open () is the HTTP Request Method-Get, post, or the method you want to call supported by any server. According to HTTP specifications, this parameter must be capitalized; otherwise, Some browsers (such as Firefox) may not be able to process requests.
The second parameter is the URL of the Request page.
The third parameter sets whether the request is in asynchronous mode. If it is true, the JavaScript function will continue to be executed without waiting for the server to respond. This is "A" in "ajax ".

After using JavaScript to create an XMLHttpRequest class to send an HTTP request to the server, you need to decide what to do when the server receives the response. This tells the HTTP request object which JavaScript function is used to process the response. You can set the onreadystatechange attribute of the object to the name of the JavaScript function to be used, as shown below:

Xmlhttp_request.onreadystatechange = functionname;

Functionname is the name of the function created with JavaScript. Be sure not to write it as functionname (). Of course, you can also directly create the JavaScript code after onreadystatechange. For example:

Xmlhttp_request.onreadystatechange = function (){
// JavaScript code segment
};

In this function. First, check the Request status. Only when a complete server response has been received can the function process the response. XMLHttpRequest provides the readystate attribute to determine the server response.

The value of readystate is as follows:
0 (not initialized)
1 (loading)
2 (loaded)
3 (in interaction)
4 (finished)

So only when readystate = 4, a complete server response has been received can the function process the response. The Code is as follows:

If (http_request.readystate = 4 ){
// Receives the complete Server Response
} Else {
// Failed to receive the complete Server Response
}

When readystate = 4, a complete server response has been received. Then, the function checks the status value of the HTTP server response. For complete status values, see W3C documentation. When the HTTP server response value is 200, the status is normal.

After checking the Request status value and response HTTP status value, you can process the data obtained from the server. There are two ways to obtain the data:

(1) return the server response in the form of a text string
(2) return a response as an xmldocument object

Example 1: return the server response using a text string to verify the existence of the Netease Pass account

First, log on to the Netease pass registration page and check whether the user name exists. Submit the user name to the checkssn. jsp page for determination. The format is:
Reg.163.com/register/checkssn.jsp? Username = User Name

Based on the method described above, we can use Ajax technology to detect Netease pass usernames:

Step 1: create a web page based on the XHTML standard and insert the JavaScript function in the

<SCRIPT type = "text/JavaScript" Language = "JavaScript">
Function getxmlrequester (){
VaR xmlhttp_request = false;
Try {
If (window. activexobject ){
For (VAR I = 5; I --){
Try {
If (I = 2 ){
Xmlhttp_request = new activexobject ("Microsoft. XMLHTTP ");
} Else {
Xmlhttp_request = new activexobject ("msxml2.xmlhttp." + I + ". 0 ");
Xmlhttp_request.setrequestheader ("Content-Type", "text/XML ");
Xmlhttp_request.setrequestheader ("Content-Type", "gb2312 ");
}
Break ;}
Catch (e ){
Xmlhttp_request = false;
}
}
} Else if (window. XMLHttpRequest ){
Xmlhttp_request = new XMLHttpRequest ();
If (xmlhttp_request.overridemimetype ){
Xmlhttp_request.overridemimetype ('text/xml ');
}
}
} Catch (e ){
Xmlhttp_request = false;
}
Return xmlhttp_request;
}

Function idrequest (n) {// defines the JavaScript function to be executed after receiving the Server Response
Url = N + document. getelementbyid ('163id'). value; // define URL parameters
Xmlhttp_request = getxmlrequester (); // call the function for creating XMLHttpRequest
Xmlhttp_request.onreadystatechange = docontents; // call the docontents Function
Xmlhttp_request.open ('get', URL, true );
Xmlhttp_request.send (null );
}
Function docontents (){
If (xmlhttp_request.readystate = 4) {// receives the complete Server Response
If (xmlhttp_request.status = 200) {// the HTTP server response value is OK.
Document. getelementbyid ('message'). innerhtml = xmlhttp_request.responsetext;
// Write the string returned by the server to the region where the ID is message on the page.
} Else {
Alert (http_request.status );
}
}
}
</SCRIPT>

Create a text box in the <body> area with the ID of 163id

<Input type = "text" id = "163id" onpropertychange = "idrequest ('HTTP: // reg.163.com/register/checkssn.jsp? Username = ') "/>

Create a blank area with ID messsge to display the returned string (you can also use the JavaScript function to capture some strings for display ):

<Div id = "message"> </div>

In this way, a user name detection Page Based on AJAX technology is ready, but this page will return all the strings on the page generated by the server response. Of course, you can also perform some operations on the returned strings, it is easy to apply to different needs.

Example 2: return a response as an xmldocument object to verify the existence of the Kingsoft Pass account

In the above example, when the server receives the response to the HTTP request, we will call the reponsetext attribute of the request object. This attribute contains the content of the response file returned by the server. Now we return a response in the form of an xmldocument object. At this time, the responsexml attribute is no longer required for the reponsetext attribute.

First, log on to the Kingsoft pass registration page and find that the detection method of Kingsoft pass username is:
Pass.kingsoft.com/ksgweb/jsp/login/uid.jsp? Uid = username, and XML data is returned:

<? XML version = "1.0" encoding = "UTF-8" standalone = "yes"?>
<Response>
<Method> isexisteduid </method>
<Result>-2 </result>
</Response>

If the result value is-1, it indicates that the user name has been registered. If the result value is-2, it indicates that the user name has not been registered, therefore, you can determine whether the user name is registered by checking the result value.

Modify the code of the previous example:

First find

Document. getelementbyid ('message'). innerhtml = xmlhttp_request.responsetext;

Changed:

VaR response = xmlhttp_request.responsexml.documentelement;
VaR result = response. getelementsbytagname ('result') [0]. firstchild. Data; // return result node data
If (result =-2 ){
Document. getelementbyid ('message'). innerhtml = "username" + document. getelementbyid ('163id'). Value + "not registered ";
}
Else if (result =-1 ){
Document. getelementbyid ('message'). innerhtml = "sorry, username" + document. getelementbyid ('163id'). Value + "registered ";
}

The above two examples illustrate the basic application of Ajax client, using Netease And Kingsoft ready-made ServerProgramOf course, in order to develop a program suitable for your own page, you also need to write your own server-side program, which is designed to operate the program language and database, this article focuses on the Application Experience of client-side Ajax, the majority of readers can make a colorful application based on the principles described in this article and various style Expression methods. I hope this article will serve as a reference.

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.