Client Side Validation Using the XMLHTTPRequest Object
来源:互联网 发布:淘宝开店二维码 编辑:程序博客网 时间:2024/05/16 07:17
Client Side Validation Using the XMLHTTPRequest Object By Jonathan Zufi | Rating: 4.3 out of 5 Rate this article |
Introduction As an avid reader of 15 seconds, I've been exposed to many articles on form validation. Form validation should not only address checking fields for content and structure, it should also handle real-time lookups on data. This article shows how Microsoft's XMLHTTPRequest component can give your users a cleaner and more efficient Web experience by improving form validation. Programming for HTTPThere have always been several ways of making HTTP calls on the Win32 platform. Visual Basic and C++ developers could leverage the WinInet library, and Visual Basic programmers could utilize the Internet Controls that shipped with Visual Basic 6.0. However, ASP developers have had a bit more work getting access to this functionality, since they would need to wrap it in a custom component for elegant interaction with ASP code. 'Raw' scripting makes the task difficult. Most people assume HTTP is a protocol reserved for browsers to communicate with Web servers. Remember, HTTP is just a protocol, and a powerful one at that. HTTP can be used by any application to talk to another application or component; it doesn't have to be a browser or a Web server. As Web developers, we are all familiar with the benefits of using the HTTP protocol. It works well across firewalls, is based on Internet standards, etc. Microsoft included the XMLHTTPRequest component in its XML toolkit so XML documents could be passed around over the Internet using the standard HTTP protocol. While all the documentation speaks of XML interchange over HTTP, the nice thing about this component is that you don't have to deal with XML at all to leverage its power. Only a few lines of code are necessary to make a HTTP call and capture the results. This makes the XMLHTTPRequest component an extremely powerful tool in every Web developer's arsenal, especially ASP developers. XMLHTTPRequest and XMLHTTP The XMLHTTPRequest component is part of MSXML, which ships with Internet Explorer 5.0 and higher. This makes it an even more attractive tool. The core object inside XMLHTTPRequest is the XMLHTTP object. There are different versions of the XMLHTTP object, since it's been included in every version of the Microsoft MSXML package. For a good overview of the latest versions and installation issues, see the Microsoft knowledge base article Q278969. The XMLHTTP object provides all of your Web browser's communication functionality with just a handful of methods and properties. To use this object, create the XMLHTTP object, call the open method with the URL you want to talk to, the type of call to make (GET, POST), and then invoke the send method. The object will basically act like a browser and retrieve the data from the URL, making it available in the responseText property. You can also make synchronous or asynchronous calls. There is also a callback facility available for asynchronous calls. Very neat and very simple. Using XMLHTTP to perform real time data validation Say that you are capturing user registration details for your Web site, and one of the fields is 'User ID'. This User ID obviously needs to be unique across your site, so you'll have a requirement to ensure that the User ID supplied at registration time does not already exist. If it does, you'll need to warn the user and ask them to re-enter it. The common way of dealing with this type of requirement is to apply the lookup logic when the form is posted. However, this can sometimes lead to what is not the best user experience. We all know how frustrating it is to continually submit forms only to find that we have forgotten a value here or there. The other downside of posting the page is that if it needs to be re-rendered with the appropriate 'please correct this problem' messages, that's another trip to the server, images, script and all. The ideal way to handle this is to alert users as soon as they have entered their username as to whether or not it is unique. On a desktop app, this would be simple - put some code in the 'lost focus' event of the text box. Javascript and the XMLHTTP object can provide the same level of interaction. Let's walk through an example, registering with a fictitious company. The HTML for the User ID field looks like this: Examine the JavaScript that performs the validation: The third parameter is used to tell the object whether or not to make the call asynchronously. I've set this to False, indicating that we want to wait until the call returns before continuing. There are two other optional parameters, username and password. These allow a connection to a site that requires username/password authentication. Now that we have prepared the request, we just need to send it. Dealing with timeouts The first issue that has probably crossed your mind is 'what if the remote site is down - how do I handle timeouts and errors?' While trapping an error from the 'send' method is feasible, this doesn't fix the time the user would have to wait while the call is being made. Recall the third parameter on the 'open' method of the XMLHTTP object. We set it to 'false'. Setting it to 'true' will make the call immediately, and the control will drop through to the next line, so you need to either poll or be notified (i.e. event) that the call has completed (successfully or not). Luckily, the XMLHTTP object can notify the function of your choice as it moves through its various stage of processing the HTTP request. Let's have a look at a slightly modified version of the client side script that deals with potential timeouts: In the updated script, I also make it a little more robust by adding some error handling. After all, the remote site may be down or the page may not exist: It is useful to note at this stage that there is another component called the ServerXMLHTTP object - see the Microsoft knowledge base article Q290761 for details about the differences between these two components. ServerXMLHTTP, as the name implies, is more suited for HTTP connectivity from the server end and is a little more elegant when dealing with timeouts. This is useful to know if you want to do some bigger and better things. This article was focused on client side validation so we focused on the XMLHTTP object since it was actually designed and optimized to be a client side component. I hope this article has shown you how powerful the XMLHTTPRequest object from Microsoft is. Check out the MSDN Web site for more examples. About the Author Jonathan Zufi is the founder of UDU World (http://www.uduworld.com), a company that sells solutions based on their ActiveInbox technology. ActiveInbox is a back end information and content delivery platform that provides information access over email and mobile text messaging. Jonathan has been developing software for over ten years. He holds an Honour's degree in Robotics and Digital Technology from Monash University (Melbourne, Australia). He was recently awarded the Pearcey Award from the Australia Computer Society, which recognizes innovative and pioneering achievement and contribution to research and development in Information and Computer Technology across Australia. Jonathan may be reached at jonathanzufi@UDUworld.com |
- Client Side Validation Using the XMLHTTPRequest Object
- Ajax & PHP without using the XmlHttpRequest Object
- Using the SharePoint 2010 Client Object Model_part_1
- Using the SharePoint 2010 Client Object Model_part_2
- Using the SharePoint 2010 Client Object Model_part_3
- Using the SharePoint 2010 Client Object Model_part_4
- Using the SharePoint 2010 Client Object Model_part_5
- Using the SharePoint 2010 Client Object Model_Part_6
- Using the SharePoint 2010 Client Object Model_part_1
- Using the SharePoint 2010 Client Object Model_part_2
- Using the SharePoint 2010 Client Object Model_part_3
- Using the SharePoint 2010 Client Object Model_part_4
- Using the SharePoint 2010 Client Object Model_part_5
- Using the SharePoint 2010 Client Object Model_Part_6
- About client-side form validation and frameworks
- Client-Side Object Model - Grid Object
- [收藏]The XMLHttpRequest Object
- Using jQuery with Client-Side Data Binding
- 哎,高三真辛苦
- 线程本地存储(Thread Local Storage, TLS)分析与使用
- 怎样用电脑收发短信?
- UC NO
- 在linux下如何制作自己的动态连接库
- Client Side Validation Using the XMLHTTPRequest Object
- Authentication in IIS
- Towards Next Generation URLs
- 邮件病毒网关cpu利用过多:(
- Middle-Tier Hosting: Enterprise Services, IIS, DCOM, Web Services, and Remoting
- 学习linux几点忠告
- Access 2000/XP 数据库的 NTFS 权限设置
- 论Mono的意义
- 用VS.Net编写扩展存储过程(一)