Ajax实现验证(3/4)

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了Ajax实现验证(3/4)，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
在这个例子中使用java servlet作为服务器端组件，完成验证日期功能
例子包括2个文件，分别是validation.html和ValidationServlet.java

在HTML代码里，有一个输入框，相应的onchange事件会触发验证方法。
首先调用createXMLHttpRequest()方法，然后把输入值发送到ValidationServlet.
callback()方法从服务器得到结果，然后委托给setMessage()方法，这个方法会检查值以确定使用什么颜色来显示消息。

以下是完整的源代码：

  1. <@H_301_14@!DOCTYPE@H_301_14@ HTML@H_301_14@ PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"@H_301_14@>@H_301_14@
    @H_301_14@
  2. <@H_301_14@html@H_301_14@>@H_301_14@
  3. <@H_301_14@head@H_301_14@>@H_301_14@
  4. <@H_301_14@title@H_301_14@>@H_301_14@validation.@H_301_14@html@H_301_14@<@H_301_14@/@H_301_14@title@H_301_14@>@H_301_14@
  5. <@H_301_14@Meta@H_301_14@ http-equiv=@H_301_14@"content-type"@H_301_14@ content@H_301_14@=@H_301_14@"text/html; charset=UTF-8"@H_301_14@>@H_301_14@
  6. <@H_301_14@script@H_301_14@ language@H_301_14@=@H_301_14@"javascript"@H_301_14@ type@H_301_14@=@H_301_14@"text/javascript"@H_301_14@>@H_301_14@
  7. var@H_301_14@ xmlHttp;@H_301_14@

  9. function createXMLHttpRequest(@H_301_14@)@H_301_14@{@H_301_14@
  10. if(@H_301_14@window.@H_301_14@ActiveXObject)@H_301_14@{@H_301_14@
  11. xmlHttp =@H_301_14@ new ActiveXObject(@H_301_14@"Microsoft.XMLHTTP"@H_301_14@)@H_301_14@;@H_301_14@
  12. }@H_301_14@
  13. else if(@H_301_14@window.@H_301_14@XMLHttpRequest)@H_301_14@{@H_301_14@
  14. xmlHttp =@H_301_14@ new XMLHttpRequest(@H_301_14@)@H_301_14@;@H_301_14@
  15. }@H_301_14@
  16. }@H_301_14@

  18. function validate(@H_301_14@)@H_301_14@{@H_301_14@

  20. createXMLHttpRequest(@H_301_14@)@H_301_14@;@H_301_14@

  22. var@H_301_14@ date =@H_301_14@ document.@H_301_14@getElementById(@H_301_14@"birthDate"@H_301_14@)@H_301_14@;@H_301_14@
  23. var@H_301_14@ url =@H_301_14@ "servlet/ValidationServlet?birthDate="@H_301_14@ +@H_301_14@ escape(@H_301_14@date.@H_301_14@value@H_301_14@)@H_301_14@;@H_301_14@
  24. xmlHttp.@H_301_14@open(@H_301_14@"GET"@H_301_14@,@H_301_14@url,@H_301_14@true)@H_301_14@;@H_301_14@
  25. xmlHttp.@H_301_14@onreadystatechange =@H_301_14@ callback;@H_301_14@
  26. xmlHttp.@H_301_14@send(@H_301_14@null)@H_301_14@;@H_301_14@


  29. }@H_301_14@

  31. function callback(@H_301_14@)@H_301_14@{@H_301_14@
  32. if(@H_301_14@xmlHttp.@H_301_14@readyState =@H_301_14@=@H_301_14@ 4)@H_301_14@{@H_301_14@
  33. if(@H_301_14@xmlHttp.@H_301_14@status =@H_301_14@=@H_301_14@ 200)@H_301_14@{@H_301_14@

  35. var@H_301_14@ mes =@H_301_14@ xmlHttp.@H_301_14@respon***ML.@H_301_14@getElementsByTagName(@H_301_14@"message"@H_301_14@)@H_301_14@[@H_301_14@0]@H_301_14@.@H_301_14@firstChild.@H_301_14@data@H_301_14@;@H_301_14@
  36. /@H_301_14@/@H_301_14@ alert(@H_301_14@xmlHttp.@H_301_14@respon***ML.@H_301_14@getElementsByTagName(@H_301_14@"message"@H_301_14@)@H_301_14@[@H_301_14@0]@H_301_14@.@H_301_14@firstChild.@H_301_14@data@H_301_14@)@H_301_14@;@H_301_14@
  37. var@H_301_14@ val =@H_301_14@ xmlHttp.@H_301_14@respon***ML.@H_301_14@getElementsByTagName(@H_301_14@"passed"@H_301_14@)@H_301_14@[@H_301_14@0]@H_301_14@.@H_301_14@firstChild.@H_301_14@data@H_301_14@;@H_301_14@
  38. setMessage(@H_301_14@mes,@H_301_14@val)@H_301_14@;@H_301_14@

  40. }@H_301_14@
  41. }@H_301_14@
  42. }@H_301_14@


  45. function setMessage(@H_301_14@message,@H_301_14@isValid)@H_301_14@{@H_301_14@
  46. var@H_301_14@ messageArea =@H_301_14@ document.@H_301_14@getElementById(@H_301_14@"dateMessage"@H_301_14@)@H_301_14@;@H_301_14@
  47. var@H_301_14@ fontColor =@H_301_14@ "red"@H_301_14@;@H_301_14@
  48. if(@H_301_14@isValid=@H_301_14@=@H_301_14@ "true"@H_301_14@)@H_301_14@{@H_301_14@
  49. fontColor =@H_301_14@ "green"@H_301_14@;@H_301_14@
  50. }@H_301_14@

  52. messageArea.@H_301_14@innerHTML =@H_301_14@ "<p style=\'color:"@H_301_14@ +@H_301_14@ fontColor +@H_301_14@"\'>"@H_301_14@ +@H_301_14@ message +@H_301_14@ "</p>"@H_301_14@;@H_301_14@
  53. }@H_301_14@
  54. <@H_301_14@/@H_301_14@script@H_301_14@>@H_301_14@
  55. <@H_301_14@/@H_301_14@head@H_301_14@>@H_301_14@

  57. <@H_301_14@body@H_301_14@>@H_301_14@
  58. <@H_301_14@h2@H_301_14@>@H_301_14@Ajax validation Example<@H_301_14@/@H_301_14@h2@H_301_14@>@H_301_14@
  59. Birth Date(@H_301_14@MM/@H_301_14@dd@H_301_14@/@H_301_14@yyyy)@H_301_14@:@H_301_14@<@H_301_14@input@H_301_14@ type@H_301_14@=@H_301_14@"text"@H_301_14@ size@H_301_14@=@H_301_14@"10"@H_301_14@ id@H_301_14@=@H_301_14@"birthDate"@H_301_14@ value@H_301_14@=@H_301_14@"11/11/2011"@H_301_14@ onchange@H_301_14@=@H_301_14@"validate();"@H_301_14@ /@H_301_14@>@H_301_14@
  60. <@H_301_14@div@H_301_14@ id@H_301_14@=@H_301_14@"dateMessage"@H_301_14@>@H_301_14@<@H_301_14@/@H_301_14@div@H_301_14@>@H_301_14@
  61. <@H_301_14@/@H_301_14@body@H_301_14@>@H_301_14@
  62. <@H_301_14@/@H_301_14@html@H_301_14@>@H_301_14@

  1. package@H_301_14@ ajax.@H_301_14@study;@H_301_14@
    @H_301_14@

  3. import@H_301_14@ java@H_301_14@.@H_301_14@io@H_301_14@.@H_301_14@IOException@H_301_14@;@H_301_14@
  4. import@H_301_14@ java@H_301_14@.@H_301_14@io@H_301_14@.@H_301_14@PrintWriter@H_301_14@;@H_301_14@
  5. import@H_301_14@ java@H_301_14@.@H_301_14@text@H_301_14@.@H_301_14@ParseException@H_301_14@;@H_301_14@
  6. import@H_301_14@ java@H_301_14@.@H_301_14@text@H_301_14@.@H_301_14@SimpleDateFormat@H_301_14@;@H_301_14@

  8. import@H_301_14@ javax@H_301_14@.@H_301_14@servlet.@H_301_14@ServletException;@H_301_14@
  9. import@H_301_14@ javax@H_301_14@.@H_301_14@servlet.@H_301_14@http.@H_301_14@HttpServlet;@H_301_14@
  10. import@H_301_14@ javax@H_301_14@.@H_301_14@servlet.@H_301_14@http.@H_301_14@HttpServletRequest;@H_301_14@
  11. import@H_301_14@ javax@H_301_14@.@H_301_14@servlet.@H_301_14@http.@H_301_14@HttpServletResponse;@H_301_14@

  13. public@H_301_14@ class@H_301_14@ ValidationServlet extends@H_301_14@ HttpServlet {@H_301_14@

  15. private@H_301_14@ static@H_301_14@ final@H_301_14@ long@H_301_14@ serialVersionUID =@H_301_14@ 1L;@H_301_14@


  18. public@H_301_14@ void@H_301_14@ doGet(@H_301_14@HttpServletRequest request@H_301_14@,@H_301_14@ HttpServletResponse response)@H_301_14@
  19. throws@H_301_14@ ServletException,@H_301_14@ IOException@H_301_14@ {@H_301_14@

  21. PrintWriter@H_301_14@ out =@H_301_14@ response.@H_301_14@getWriter@H_301_14@(@H_301_14@)@H_301_14@;@H_301_14@
  22. response.@H_301_14@setContentType@H_301_14@(@H_301_14@"text/xml"@H_301_14@)@H_301_14@;@H_301_14@
  23. boolean@H_301_14@ passed =@H_301_14@ validateDate(@H_301_14@request@H_301_14@.@H_301_14@getParameter@H_301_14@(@H_301_14@"birthDate"@H_301_14@)@H_301_14@)@H_301_14@;@H_301_14@
  24. response.@H_301_14@setHeader(@H_301_14@"Cache-Control"@H_301_14@,@H_301_14@ "no-cache"@H_301_14@)@H_301_14@;@H_301_14@
  25. String@H_301_14@ message =@H_301_14@ "You have entered an invalid date"@H_301_14@;@H_301_14@
  26. if@H_301_14@(@H_301_14@passed)@H_301_14@{@H_301_14@

  28. message =@H_301_14@ "You have entered a valid date"@H_301_14@;@H_301_14@
  29. }@H_301_14@
  30. out.@H_301_14@println@H_301_14@(@H_301_14@"<response>"@H_301_14@)@H_301_14@;@H_301_14@
  31. out.@H_301_14@println@H_301_14@(@H_301_14@"<passed>"@H_301_14@ +@H_301_14@ Boolean@H_301_14@.@H_301_14@toString@H_301_14@(@H_301_14@passed)@H_301_14@ +@H_301_14@ "</passed>"@H_301_14@)@H_301_14@;@H_301_14@
  32. out.@H_301_14@println@H_301_14@(@H_301_14@"<message>"@H_301_14@ +@H_301_14@ message +@H_301_14@"</message>"@H_301_14@)@H_301_14@;@H_301_14@
  33. out.@H_301_14@println@H_301_14@(@H_301_14@"</response>"@H_301_14@)@H_301_14@;@H_301_14@

  35. out.@H_301_14@close@H_301_14@(@H_301_14@)@H_301_14@;@H_301_14@
  36. }@H_301_14@


  39. private@H_301_14@ boolean@H_301_14@ validateDate(@H_301_14@String@H_301_14@ date@H_301_14@)@H_301_14@ {@H_301_14@

  41. boolean@H_301_14@ isValid@H_301_14@ =@H_301_14@ true;@H_301_14@
  42. if@H_301_14@(@H_301_14@date@H_301_14@ !@H_301_14@=@H_301_14@ null@H_301_14@)@H_301_14@{@H_301_14@
  43. SimpleDateFormat@H_301_14@ formatter@H_301_14@ =@H_301_14@ new@H_301_14@ SimpleDateFormat@H_301_14@(@H_301_14@"MM/dd/yyyy"@H_301_14@)@H_301_14@;@H_301_14@
  44. try@H_301_14@{@H_301_14@
  45. formatter@H_301_14@.@H_301_14@parse@H_301_14@(@H_301_14@date@H_301_14@)@H_301_14@;@H_301_14@
  46. }@H_301_14@catch@H_301_14@(@H_301_14@ParseException@H_301_14@ pe)@H_301_14@{@H_301_14@
  47. System@H_301_14@.@H_301_14@out.@H_301_14@println@H_301_14@(@H_301_14@pe.@H_301_14@toString@H_301_14@(@H_301_14@)@H_301_14@)@H_301_14@;@H_301_14@
  48. isValid@H_301_14@ =@H_301_14@ false;@H_301_14@
  49. }@H_301_14@
  50. }@H_301_14@
  51. else@H_301_14@{@H_301_14@
  52. isValid@H_301_14@ =@H_301_14@ false;@H_301_14@
  53. }@H_301_14@
  54. return@H_301_14@ isValid@H_301_14@;@H_301_14@
  55. }@H_301_14@


  58. public@H_301_14@ void@H_301_14@ doPost(@H_301_14@HttpServletRequest request@H_301_14@,@H_301_14@ IOException@H_301_14@ {@H_301_14@

  60. doGet(@H_301_14@request@H_301_14@,@H_301_14@response)@H_301_14@;@H_301_14@
  61. }@H_301_14@


  64. }@H_301_14@

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作