`
wangtong40
  • 浏览: 252923 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

AJAX基础教程-5 Ajax Validate

阅读更多
java 代码
  1. package ajax.foundations_of_ajax;   
  2.   
  3. import java.io.IOException;   
  4. import java.io.PrintWriter;   
  5. import java.text.ParseException;   
  6. import java.text.SimpleDateFormat;   
  7.   
  8. import javax.servlet.ServletException;   
  9. import javax.servlet.http.HttpServlet;   
  10. import javax.servlet.http.HttpServletRequest;   
  11. import javax.servlet.http.HttpServletResponse;   
  12.   
  13. public class ValidationServlet extends HttpServlet {   
  14.     /**  
  15.      * Handles the HTTP <code>GET</code> method.  
  16.      *   
  17.      * @param request  
  18.      *            servlet request  
  19.      * @param response  
  20.      *            servlet response  
  21.      */  
  22.     protected void doGet(HttpServletRequest request,   
  23.             HttpServletResponse response) throws ServletException, IOException {   
  24.         PrintWriter out = response.getWriter();   
  25.         boolean passed = validateDate(request.getParameter("birthDate"));   
  26.         response.setContentType("text/xml");   
  27.            
  28.         response.setHeader("Cache-Control""no-cache");   
  29.         String message = "You have entered an invalid date.";   
  30.         if (passed) {   
  31.             message = "You have entered a valid date.";   
  32.         }   
  33.         out.println("<response>");   
  34.         out.println("<passed>" + Boolean.toString(passed) + "</passed>");   
  35.         out.println("<message>" + message + "</message>");   
  36.         out.println("</response>");   
  37.         out.close();   
  38.     }   
  39.   
  40.     /**  
  41.      * Checks to see whether the argument is a valid date. A null date is  
  42.      * considered invalid. This method used the default data formatter and  
  43.      * lenient parsing.  
  44.      *   
  45.      * @param date  
  46.      *            a String representing the date to check  
  47.      * @return message a String representing the outcome of the check  
  48.      */  
  49.     private boolean validateDate(String date) {    
  50.         boolean isValid = true;   
  51.         if (date != null) {   
  52.             SimpleDateFormat formatter = new SimpleDateFormat("MM/dd/yyyy");   
  53.             try {   
  54.                 formatter.parse(date);   
  55.             } catch (ParseException pe) {   
  56.                 System.out.println(pe.toString());   
  57.                 isValid = false;   
  58.             }   
  59.         } else {   
  60.             isValid = false;   
  61.         }   
  62.         return isValid;   
  63.     }   
  64. }   
js 代码
  1. <script type="text/javascript">   
  2. var xmlHttp;   
  3. //创建xmlHttp对象   
  4.     function createXMLHttpRequest() {   
  5.         if (window.ActiveXObject) {   
  6.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
  7.         }   
  8.         else if (window.XMLHttpRequest) {   
  9.         xmlHttp = new XMLHttpRequest();   
  10.         }   
  11.     }   
  12.        
  13.     function validate() {   
  14.         createXMLHttpRequest();   
  15.         var date = document.getElementById("birthDate");   
  16.         var url = "ValidationServlet?birthDate=" + escape(date.value);   
  17.         xmlHttp.open("GET", url, true);   
  18.         xmlHttp.onreadystatechange = callback;   
  19.         xmlHttp.send(null);   
  20.     }   
  21.        
  22.     function callback() {   
  23.         if (xmlHttp.readyState == 4) {   
  24.         if (xmlHttp.status == 200) {   
  25.             var mes =   
  26.             xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;   
  27.             var val =   
  28.             xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;   
  29.             setMessage(mes, val);   
  30.             }   
  31.         }   
  32.     }   
  33.     function setMessage(message, isValid) {   
  34.         var messageArea = document.getElementById("dateMessage");   
  35.         fontColor = "";   
  36.         if (isValid == "true") {   
  37.         fontColor = "green";   
  38.         }   
  39.   
  40.         messageArea.innerHTML = "<font color=" + fontColor + ">"  
  41.         + message + " </font>";   
  42.     }   
  43. </script>  
分享到:
评论

相关推荐

    [浪曦原创]AJAX基础教程.ppt

    **Ajax基础教程** Ajax,全称"Asynchronous JavaScript and XML",是一种用于构建交互式Web应用程序的技术,它使得网页能够在不重新加载整个页面的情况下与服务器进行数据交换,提升了用户体验。Ajax的核心在于异步...

    Laravel开发-laravel-form-ajax-validation

    本教程将详细介绍如何在Laravel中使用Ajax进行表单验证。 首先,让我们了解Laravel的表单验证基础。在Laravel中,验证主要通过`Request`类来实现。创建一个自定义的`Request`子类,例如`App\...

    Ajax使用教程,入门推荐

    本教程将带你逐步了解Ajax的基础知识,包括其工作原理、核心组件以及如何在实际项目中应用。 一、Ajax工作原理 Ajax的核心在于创建XMLHttpRequest对象,它是浏览器内置的对象,用于在后台与服务器进行通信。当用户...

    jQuery Ajax 登陆和注册页面

    **一、jQuery与Ajax基础** jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和AJAX交互。Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况下与服务器进行数据交互,提高页面...

    Ajax表单验证框架

    一、Ajax基础 Ajax的核心在于异步通信,利用JavaScript与服务器进行交互,实现局部刷新。它通过创建XMLHttpRequest对象作为后台通信桥梁,发送HTTP请求并接收响应。在HTML中,我们通常会添加事件监听器,如按钮点击...

    php视频实现验证码图_用jQuery实现ajax验证

    本教程将介绍如何使用PHP生成验证码图像,并结合jQuery实现AJAX验证,以提供无刷新的用户体验。 首先,我们要创建一个PHP文件(如`captcha.php`),用于生成随机的验证码和对应的图像。验证码通常包含一些字母和...

    Ajax+js无刷新页面注册

    **一、Ajax基础** Ajax的核心是通过XMLHttpRequest对象与服务器进行异步通信。这个对象允许我们在后台与服务器进行数据交换,而无需重新加载整个页面。创建一个XMLHttpRequest对象,我们通常会使用以下代码: ```...

    jQuery基础教程(第四版)高清非扫描pdf+配套资源源代码

    《jQuery基础教程(第四版)》是一本针对初学者和进阶者全面解析jQuery库的权威指南。本书详细介绍了如何利用jQuery简化JavaScript编程,提升网页交互体验。在本压缩包中,你将找到高清非扫描的PDF版本,保证了阅读...

    jQuery基础教程.rar 源码 全部例子

    《jQuery基础教程》是一份专为初学者设计的资源包,包含了完整的源码和一系列实例,旨在帮助初学者快速掌握jQuery的基本用法和核心概念。jQuery是一个强大的JavaScript库,简化了HTML文档遍历、事件处理、动画制作...

    jQuery基础教程2

    **jQuery基础教程2** jQuery,一个轻量级的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。它是Web开发中不可或缺的一部分,尤其对于初学者而言,jQuery提供了友好的API,使得...

    《jquery.基础教程》源代码

    《jQuery基础教程》源代码包含了对JavaScript库jQuery的深入学习材料,主要针对初学者和希望提升jQuery技能的开发者。此教程旨在帮助读者理解和掌握如何利用jQuery简化网页开发,提高交互设计和Web应用性能。以下是...

    JSP AJAX 无刷新表单验证

    本教程将深入讲解如何在JSP(JavaServer Pages)环境中使用AJAX实现无刷新的表单验证。 **1. JSP基础** JSP是一种动态网页技术,它允许开发者在HTML代码中嵌入Java代码,用于处理服务器端的业务逻辑。在JSP页面中...

    简单 结合ajax+php的正则验证

    在IT行业中,前端和后端的交互是网页应用的基础,而AJAX(Asynchronous JavaScript and XML)技术使得这种交互变得更加高效、流畅。本教程将聚焦于如何利用AJAX结合PHP进行正则表达式验证,以实现一个简单的用户注册...

    jQuery基础教程

    这个“jQuery基础教程”旨在帮助初学者快速掌握jQuery的核心概念和常用方法,从而提升Web开发效率。 一、jQuery的引入与选择器 在HTML文档中,可以通过`&lt;script&gt;`标签引入jQuery库。默认情况下,我们可以从CDN...

    JQUERY基础教程实例(用户检测)

    **jQuery基础教程实例:用户检测** 在Web开发中,用户交互是至关重要的,而jQuery作为一个强大的JavaScript库,简化了DOM操作、事件处理以及动画效果。本教程将专注于使用jQuery进行用户检测,帮助开发者实现更丰富...

    DWZ富客户端框架,使用教程

    - **dwz.core.js**:核心库,包含框架的基础功能。 - **dwz.ui.js**:用户界面相关的功能库。 - **dwz.ajax.js**:Ajax请求处理。 - **dwz.alertMsg.js**:消息提示功能。 - **dwz.jDialog.js**:对话框组件。 ...

    Validate实现表单验证

    首先,`jQuery`是`Validate`库的基础,所以我们需要对jQuery有一定的了解。jQuery是一个轻量级的JavaScript库,简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。在`jQuery`基础上,`Validate`提供了一套完整的...

Global site tag (gtag.js) - Google Analytics