• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    AJAX+Servlet实现的数据处理显示功能示例

    本文实例讲述了AJAX+Servlet实现的数据处理显示功能。分享给大家供大家参考,具体如下:

    实现功能:在输入框中输入字符,用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();
    }
    
    

    更多关于ajax相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《JavaScript中ajax操作技巧总结》、《PHP+ajax技巧与应用小结》及《asp.net ajax技巧总结专题》

    希望本文所述对大家ajax程序设计有所帮助。

    您可能感兴趣的文章:
    • Servlet3.0与纯javascript通过Ajax交互的实例详解
    • 浅谈ajax在jquery中的请求和servlet中的响应
    • Servlet获取AJAX POST请求中参数以form data和request payload形式传输的方法
    • 实例解读Ajax与servlet交互的方法
    • jquery请求servlet实现ajax异步请求的示例
    • 使用jquery 的ajax 与 Java servlet的交互代码实例
    上一篇:AJAX+JSP实现读取XML内容并按排列显示输出的方法示例
    下一篇:Ajax获取回调函数无法赋值给全局变量的问题
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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