zoukankan      html  css  js  c++  java

  • jsp ajax实例讲解

    下面介绍JSP前台表单内容通过Ajax异步提交到后台Servlet进行校验（校验方式多种，包括提取数据库信息，校验用户名是否重复等），异步在JSP表单页面显示校验结果信息的基本过程。 

    一、说明： 

           1.由于本文只限于介绍JSP+Servlet+Ajax运用的基本流程，重点不在于后台数据库的访问和校验内容，因此省略Servlet对数据库的访问。 

    二、基本流程： 

          1. JSP页面login.jsp提供一个表单“form”，表单中有两个“text”类型的输入框，其中我们将用第一个输入框来做实验。 

            在第一个输入框中（输入用户名），通过onblur=validate();，当用户光标离开输入框时，触发JS函数validate() ，函数validate()在Ajax.js文件中声明。

    Html代码  收藏代码
    1. <%@page contentType="text/html" pageEncoding="UTF-8"%>  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
    3.     "http://www.w3.org/TR/html4/loose.dtd">  
    4.   
    5. <html>  
    6.     <head>  
    7.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    8.         <script type="javascript" src="Ajax.js"></script>        
    9.     </head>  
    10.     <body>  
    11.         <h1>Test Ajax</h1><p>  
    12.         <form action="" method="get" name="form">  
    13.             <br>  
    14.             输入用户名：  
    15.             <input type="text" size="10" maxlength="8" id="userName" name="name" onblur="validate()">  
    16.             <span id="info"></span>  
    17.             <br>  
    18.             输入商品名：  
    19.             <input type="text" size="10" maxlength="8" >  
    20.         </form>  
    21.     </body>  
    22. </html>  

     
           

    2、Ajax.js文件声明了一系列函数，用于完成向表单与servlet的中接处理。 


    2.1、函数validate()要点： 

            2.1.1、通过document.getElementById(String id)获取表单中有特定id值的输入框的值，即获取用户输入的用户名。 

            2.1.2、声明一个变量url，存放要访问的servlet:"validate.do?id=" + escape(idField.value)，问号？后面表示在url后添加一个值，这个值在validate.do这个servlet中可以通过request.getParameter("id")来获取。

    Js代码  收藏代码
    1. var url = "validate.do?id=" + escape(idField.value);  

      

           2.1.3、 通过if()语句以兼容IE，Firefox等多个浏览器版本的方式创建一个XMLHttpRequest对象。

    Java代码  收藏代码
    1. if(window.XMLHttpRequest) {  
    2.     //IE7, Firefox, Opera支持  
    3.     req = new XMLHttpRequest();  
    4. }else if(window.ActiveXObject) {  
    5.     //IE5,IE6支持  
    6.     req = new ActiveXObject("Microsoft.XMLHTTP");  
    7. }  

     

           2.1.4、调用XMLHttpRequest对象函数open()准备向servlet发送请求（此时只是“准备发送”，并没有发送）

    Js代码  收藏代码
    1. req.open("GET", url, true);  

      

           2.1.5、 调用XMLHttpRequest对象函数send(param)向servlet发送请求。param参数的值null（关于send()方法使用请另外查阅）

    Js代码  收藏代码
    1. req.send(null);  


           2.1.6、调用一个触发事件onreadystatechange，每当 readyState 改变时，onreadystatechange 函数就会被执行。readyState有5个可能值：0：请求未初始化（在调用open()之前）；1：请求已经提出（调用send()之前）；2：请求已经发送（这里通常可以从响应得到内容头部）；3：请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）；4：请求已经完成（可以访问服务器响应并使用它）

    Js代码  收藏代码
    1. req.onreadystatechange = callback;  

     

    2.2、function callback()要点： 

          2.2.1    XMLHttpRequest.status = 200表示服务器已经成功响应。 

                      通过XMLHttpRequest.responseText获取servlet端的getPrintWriter().write()输出的响应。得到的值是 一个String类型数据。

    Js代码  收藏代码
    1. var check = req.responseText;  

     

    2.3、通过show()函数输出结果到标签标记的位置。

    完整的Ajax.js文件：

    Js代码  收藏代码
    1. var req;  
    2. function validate() {  
    3.     //获取表单提交的内容  
    4.     var idField = document.getElementById("userName");  
    5.     //访问validate.do这个servlet，同时把获取的表单内容idField加入url字符串，以便传递给validate.do  
    6.     var url = "validate.do?id=" + escape(idField.value);                  
    7.     //创建一个XMLHttpRequest对象req  
    8.     if(window.XMLHttpRequest) {  
    9.         //IE7, Firefox, Opera支持  
    10.         req = new XMLHttpRequest();  
    11.     }else if(window.ActiveXObject) {  
    12.         //IE5,IE6支持  
    13.         req = new ActiveXObject("Microsoft.XMLHTTP");  
    14.     }  
    15.     /* 
    16.      open(String method,String url, boolean )函数有3个参数 
    17.      method参数指定向servlet发送请求所使用的方法，有GET,POST等 
    18.      boolean值指定是否异步，true为使用，false为不使用。 
    19.      我们使用异步才能体会到Ajax强大的异步功能。 
    20.      */  
    21.     req.open("GET", url, true);  
    22.     //onreadystatechange属性存有处理服务器响应的函数,有5个取值分别代表不同状态  
    23.     req.onreadystatechange = callback;  
    24.     //send函数发送请求  
    25.     req.send(null);                  
    26. }  
    27.   
    28. function callback() {  
    29.     if(req.readyState == 4 && req.status == 200) {  
    30.         var check = req.responseText;  
    31.         show (check);  
    32.     }  
    33. }  
    34.   
    35. function show(str) {  
    36.     if(str == "OK") {  
    37.         var show = "<font color='green'>恭喜！！用户名可用！</font>";  
    38.         document.getElementById("info").innerHTML = show;  
    39.     }  
    40.     else if( str == "NO") {  
    41.         var show = "<font color='red'>对不起，用户名不可用！！请重新输入！</font>";  
    42.         document.getElementById("info").innerHTML = show;  
    43.     }  
    44. }  

     
    三、servlet处理： 

          重点1：通过以下几行代码设置浏览器不进行Ajax处理页面的缓存（如果出现缓存，将导致一些不可预知的麻烦） 

    Java代码  收藏代码
    1. response.setContentType("text/html");  
    2. response.setHeader("Cache-Control", "no-store");  
    3. response.setHeader("Pragma", "no-cache");  
    4. response.setDateHeader("Expires", 0);  

     
           重点2：通过request.getParameter()来获取Ajax传递的参数。

    Java代码  收藏代码
    1. String name = request.getParameter("id");  

           重点3：通过response.getWriter().write()向Ajax输出参数，在Ajax一端通过var check = XMLHttpRequest.responseText获取参数值。

    Java代码  收藏代码
    1. if(name.equals("1")) {  
    2.     out.write("OK");  
    3. }  
    4. else {  
    5.     out.write("NO");  
    6. }  

     
    完整的servlet代码：

    Java代码  收藏代码
    1. package com.model;  
    2.   
    3. import java.io.IOException;  
    4. import java.io.PrintWriter;  
    5. import javax.servlet.ServletException;  
    6. import javax.servlet.http.HttpServlet;  
    7. import javax.servlet.http.HttpServletRequest;  
    8. import javax.servlet.http.HttpServletResponse;  
    9.   
    10.   
    11. public class DoAjaxServlet extends HttpServlet {  
    12.      
    13.     protected void processRequest(HttpServletRequest request, HttpServletResponse response)  
    14.     throws ServletException, IOException {  
    15.         response.setContentType("text/html;charset=UTF-8");  
    16.         PrintWriter out = response.getWriter();  
    17.         try {  
    18.             response.setContentType("text/html");  
    19.             response.setHeader("Cache-Control", "no-store");  
    20.             response.setHeader("Pragma", "no-cache");  
    21.             response.setDateHeader("Expires", 0);  
    22.             String name = request.getParameter("id");  
    23.             if(name.equals("1")) {  
    24.                 out.write("OK");  
    25.             }  
    26.             else {  
    27.                 out.write("NO");  
    28.             }  
    29.         } finally {   
    30.             out.close();  
    31.         }  
    32.     }   
    33.   
    34.     @Override  
    35.     protected void doGet(HttpServletRequest request, HttpServletResponse response)  
    36.     throws ServletException, IOException {  
    37.         processRequest(request, response);  
    38.     }   
    39.   
    40.     @Override  
    41.     protected void doPost(HttpServletRequest request, HttpServletResponse response)  
    42.     throws ServletException, IOException {  
    43.         processRequest(request, response);  
    44.     }  
    45.   
    46.     @Override  
    47.     public String getServletInfo() {  
    48.         return "Short description";  
    49.     }  
    50.   
    51. }  

     

    最后，记得在web.xml配置文件中配置这个servlet:

    Xml代码  收藏代码
    1. <servlet>  
    2.     <servlet-name>DoAjaxServlet</servlet-name>  
    3.     <servlet-class>com.model.DoAjaxServlet</servlet-class>  
    4. </servlet>  
    5. <servlet-mapping>  
    6.     <servlet-name>DoAjaxServlet</servlet-name>  
    7.     <url-pattern>/validate.do</url-pattern>  
    8. </servlet-mapping>  
  • 相关阅读:
    js 检测浏览器
    js获取url参数
    js 使用Math函数取得数组最大最少值
    js 取一定范围内的整数
    遍历文件夹内所有文件
    'weinre' 不是内部或外部命令，也不是可运行的程序 或批处理文件。 解决方案
    解决图片缓存导致页面刷新无效果问题
    JAVA中的几种基本数据类型是什么，各自占用多少字节
    Mac终端git，svn提交代码步骤
    小程序分享链接功能
  • 原文地址：https://www.cnblogs.com/OldZhao/p/5060446.html
Copyright © 2011-2022 走看看