Tutorials to .com

Tutorials to .com » Asp » Xml » XMLHTTPRequest object with client-side validation

XMLHTTPRequest object with client-side validation

Print View , by: iSee ,Total views: 29 ,Word Count: 2154 ,Date: Wed, 22 Apr 2009 Time: 6:19 AM

WEB Forms Authentication is often encountered in the development, we previously common practice is: the client on the form to check the contents of domains to see if certain requirements are met or to meet a certain degree of structure, such as: content whether empty or fill in the required format of the content. In fact, we can also be used for further verification, such as real-time data verification, the following, we will use XMLHTTPRequest components provided by Microsoft to further enhance the ability to form validation.

In the WIN32 platform are many ways to HTTP programming, vb and c + + programmers can use the WinInet library, VB6 programmers can also use the Internet control VB6 own. However, the asp programmers to be said that the realization of such a function is simple, we can make a packaging components. Most people think that only a browser and HTTP server to communicate the agreement in this regard, it is indeed a powerful agreement. HTTP can also be used in any application or between applications and communication between components, but also do not have to be the browser or server. WEB developers as we are very familiar with the benefits of HTTP, such as the inter-firewall, based on Internet standards.

Provided by Microsoft in its xml tool bag includes the XMLHTTPRequest components, xml documents can also be through a standard HTTP protocol to send everywhere in the INTERNET, when using HTTP protocol to send xml document format, XMLHTTPRequest component of the convenience is that, you do not have to deal with XML on these, we also need to write a few simple lines of code can be the result, therefore, is on the WEB developers, XMLHTTPRequest component is a powerful tool.

XMLHTTPRequest component is part of MSXML, when you installed the above version of IE5.0 browser, you can use the component function. XMLHTTPRequest object is the core of XMLHTTP, XMLHTTPRequest object There are several different versions, Microsoft's MSXML package has a corresponding provision of the site can go to Microsoft to download the latest version. XMLHTTP object provides many convenient methods and properties to achieve the communication function of the browser. To use the XMLHTTP object, we must first create an XMLHTTP object, and then call the open method to specify the URL you communicate, and then call the send method to send your request. This object plays the role as the browser, and then from the responseText property to return data. Can also set up call synchronous or asynchronous mode.

Next, we will as a practical example to see how to use XMLHTTP to form real-time data validation.

The assumption that you want in your site's registered users, of which there is a field called "User ID", this field must be unique, of course, by e-mail to ensure that only, but if the user does not have e-mail it? Therefore, we request when a user registration, users can enter at any time to check the "User ID" is already in existence. If there is, it must immediately notify the user re-fill. Our normal practice is to submit the form first before we know the "User ID" already exists. Clearly, this approach is not the best, in order to know the existence of the value, we have been conducting a form of submission, it means that too many times to deal with the server. The best way is when a user has just finished entering "User ID" then to know whether the existence of the value already exists. Using javascript and XMLHTTP will be able to achieve such a demand.

Assume that the following registration page:

Registration page on the "User ID" is the HTML code may look like the following:

<input type="text" name="UserID" onblur="validateuserid(this.value);">

When the user finished entering "User ID" of the value of the focus out of the box, the onblur event is triggered, of course, if you do not like to use the onblur event may also be used as the button onclick event to do the same thing. The following is the text input box lost focus after the implementation of the script:

<SCRIPT LANGUAGE="JavaScript">
function validateuserid (suserid)
(
/ / Change the mouse shape to wait for the state, taking into account the speed of the network and server load, may be two or three seconds to return results, so as to give the user a prompt to run the state, of course, we also can make a more friendly dhtml the interface.
document.body.style.cursor = 'wait';

/ / Create an instance of the XMLHTTPRequest object, of course, in accordance with the different versions, you can also read:
/ / Var oXMLHTTP = new ActiveXObject ( "Msxml2.XMLHTTP");
var oXMLHTTP = new ActiveXObject ( "Microsoft.XMLHTTP");

/ / We would like to request the ASP page, as a result of our request is for the client, so we must use absolute addresses.
var sURL = "http://ServerName/VirtureDirectory/validateuser.asp?username =" + suserid

/ / Ready to send the request. XMLHTTP request There are several ways: for example, POST, HEAD, PUT, etc., the first three parameters indicate whether the request is asynchronous.
/ / This is the way the use of synchronization. Set to false, indicates that: We work in the following prior to the return of the results have been waiting for.
/ / Open method has two parameters, to request a user name and password provided by the site user name and password.
oXMLHTTP.open ( "GET", sURL, false);

/ / Send the request
oXMLHTTP.send ();

/ / According to the results of the return to tell the user whether the existence of the "User ID"
if (oXMLHTTP.responseText == "exists")
alert ( "I'm sorry: User ID" + suserid + "already exists, and ask another one for you.");

document.body.style.cursor = 'auto';
)
</ SCRIPT>

If the "User ID" in the database already exists, it will return "exists", of course, you can modify the return value. Here, we take a look at how to write our ASP page:

<%
Dim objConn, objRS, sUserID

'Made to send to the "User ID"
sUserID = Replace (Trim (Request.QueryString ( "userid ")),"'","")

'To establish a database connection and execute the query to see if the "User ID" the existence of
Set objConn = Server.CreateObject ( "ADODB.Connection")
objConn.Open CONNECTIONSTRING
sSQL = "SELECT userid FROM usertable WHERE userid = '" + sUserID + "'"
Set objRS = objConn.Execute (sSQL)

'If there is on output "exists"
If Not objRS.EOF Then Response.Write "exists"

'Release object
objRS.Close
objConn.Close
Set objRS = Nothing
Set objConn = Nothing
%>

As a test, if the computer or testing environment does not have the database, you also wrote a simple test:

<%

sUserID = Replace (Trim (Request.QueryString ( "userid ")),"'","")
If sUserID = "AAA" Then Response.Write "exists"

%>

If the server is working properly, the above code will soon be returned, but if the server crashes, we are not to wait indefinitely? We also must deal with error handling and overtime. XMLHTTP object open method, we used asynchronous manner, so that when the request, the process can continue down the implementation, we check the success of the state to get. XMLHTTP object in the different stages have different status values:

0: UNINITIALIZED, XMLHTTP object has been created, but has not yet initialized (open approach also did not call)
1: LOADING, XMLHTTP object has been created, but the send method has not called.
2: LOADED, send method has been called, and the state of values and in response to the first information can be, but it does not return response information.
3: INTERACTIVE, part of the data has been returned responseBody and responseText can be part of the data.
4: COMPLETED, all data have been returned to.

The following is the updated all the source code:

<div id="divProgress" align="center"> being verified, please wait ... ... </ div>
<form name="form1" method="post" action="">
<table border="1" cellspacing="1" cellpadding="0" bordercolor="#0066FF" align="center" style="font-size:9pt">
<tr>
<td width="88"> <b> Name: </ b> </ td>
<td width="200">
<input type="text" name="FirstName" style="border:1px solid red;width:100%">
</ td>
</ tr>
<tr>
<td> <b> e-mail: </ b> </ td>
<td> <input type="text" name="Email" style="border:1px solid red;width:100%"> </ td>
</ tr>
<tr>
<td> <b> User ID: </ b> </ td>
<td> <input type="text" name="UserID" onblur="validateuserid(this.value)" style="border:1px solid red;width:100%"> </ td>
</ tr>
<tr>
<td> <b> Password: </ b> </ td>
<td> <input type="text" name="Pwd" style="border:1px solid red;width:100%"> </ td>
</ tr>
</ table>
<p align="center">
<input type="submit" name="Submit" value="" style="font-size:9pt">
<input type="reset" name="Submit2" value="" style="font-size:9pt">
</ p>
</ form>
<SCRIPT LANGUAGE="JavaScript">
var userid, oXMLHTTP;
function validateuserid (suserid)
(
oXMLHTTP = new ActiveXObject ( "Microsoft.XMLHTTP");
userid = suserid;
/ / Here are Meng will be used to test the machine, you can change the other site for testing.
var sURL = "http://mengxianhui/asp/validateuser.asp?userid =" + userid;
oXMLHTTP.onreadystatechange = managestatechange;
oXMLHTTP.open ( "GET", sURL, true);
try (
oXMLHTTP.send ();
)
catch (e)
(
alert ( "can not be verified at this time.");
document.form1.FirstName.focus ();
)
)

function managestatechange () (
switch (oXMLHTTP.readyState)
(
case 2, 3:
document.all ( "divProgress"). style.display = "block";
break;
case 4:
if (oXMLHTTP.responseText == "exists")
alert ( "Sorry! User ID:" + userid + "already exists.");
document.all ( "divProgress"). style.display = "none";
break;
)
)
document.all ( "divProgress"). style.display = "none";
</ script>

Worthy of note is this: there is another component called "ServerXMLHTTP", as its name implies, this component is more suitable for use in server-side, but also suitable for a user to verify the situation. For more information, please refer to Microsoft's XML SDK.


Asp and XML related Articles


Can't Find What You're Looking For?


Rating: Not yet rated

Comments

No comments posted.