• AJAX+Servlet实现的数据处理显示功能示例


    转自:https://www.jb51.net/article/141505.htm

    实现功能:在输入框中输入字符,用AJAX传到后台Servlet处理后加上随机数,并返回到前台显示。

    一、写前台jsp页面index.jsp

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     <head>
      <title>My JSP 'index.jsp' starting page</title>
      <script type="text/javascript">
      /*
        ajax 的几个步骤:
        1、建立XmlHttpRequest对象
        2、设置回调函数
        3、使用Open方法建立与服务器的连接
        4、向服务器发送数据
        5、在回调函数中针对不同响应状态进行处理
      */
        var xmlHttp;
        function createXMLHttpRequest(){  //1建立XmlHttpRequest对象
          if(window.ActiveXObject){
            try{
              xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
            }catch(e){
              alert("Error!!!");
            }
          }else{
            xmlHttp = new XMLHttpRequest();
          }
        }
        function showMes(){   //2设置回调函数
          if(xmlHttp.readyState==4){ //数据接收完成并可以使用
            if(xmlHttp.status==200){ //http状态OK
            //5、在回调函数中针对不同响应状态进行处理
              document.getElementById("sp").innerHTML = xmlHttp.responseText; //服务器的响应内容
            }else{
              alert("出错:"+xmlHttp.statusText); //HTTP状态码对应的文本
            }
          }
        }
        /**
        //这是GET方法传送
        function getMes(){
          createXMLHttpRequest();
          var txt = document.getElementById("txt").value;
          var url="servlet/AjaxServlet?txt="+txt;
          url = encodeURI(url); //转换码后再传输
          xmlHttp.open("GET",url,true); //3使用Open方法建立与服务器的连接
          xmlHttp.onreadystatechange=showMes;
          xmlHttp.send(null); //4向服务器发送数据
        }
        */
        /**
        *这是post方法
        */
        function postMes(){
          createXMLHttpRequest();
          var txt = document.getElementById("txt").value;
          var url = "servlet/AjaxServlet";
          var params = "username="+txt;
        // alert(params);
          xmlHttp.open("POST",url,true);
          xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
          xmlHttp.send(params);
          xmlHttp.onreadystatechange = showMes;
        }
      </script>
     </head>
     <body>
      <input type="text" id="txt"/>
      <input type="button" value="query" onclick="postMes()" />
      <span id="sp"></span>
     </body>
    </html>
    

    二、写后台Servlet加random随机数,关键代码如下:

    public void doGet(HttpServletRequest request, HttpServletResponse response)
          throws ServletException, IOException {
        request.setCharacterEncoding("utf-8"); //用utf-8转换获得传输过来的码
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        String txt = request.getParameter("txt");
    //   String tx = new String(txt.getBytes("iso-8859"),"utf-8");
        out.print("txt="+txt+Math.random());
        out.flush();
        out.close();
    }
    /**
    * The doPost method of the servlet. <br>
    *
    * This method is called when a form has its tag value method equals to post.
    *
    * @param request the request send by the client to the server
    * @param response the response send by the server to the client
    * @throws ServletException if an error occurred
    * @throws IOException if an error occurred
    */
    public void doPost(HttpServletRequest request, HttpServletResponse response)
          throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        String username = request.getParameter("username");
    //   String txt = new String(username.getBytes("ISO-8859-1"),"UTF-8");
        String txt = new String(username);
        out.print("txt="+txt+":"+Math.random());
        out.flush();
        out.close();
    }
    
  • 相关阅读:
    模拟ssh远程执行命令
    基于UDP协议的套接字编程
    TCP三次握手,四次挥手
    基于TCP协议的套接字编程
    osi七层协议
    Python之__class__.__module__,__class__.__name__
    异常处理
    单例模式
    类方法__setattr__,__delattr__,__getattr__
    反射(hasattr,getattr,delattr,setattr)
  • 原文地址:https://www.cnblogs.com/emanlee/p/14124210.html
Copyright © 2020-2023  润新知