zoukankan      html  css  js  c++  java
  • Ajax实现局部数据交互的一个简单实例

      想要实现的功能:利用Ajax技术通过点击一个<button>按钮,然后在指定的文本框中输出想要的值。

    1、使用Jsp创建一个前端页面。

    1 <body>
    2     <div style="text-align: center;">
    3         <div>
    4             <input type="button" onclick="loadName()" value="Ajax获取数据" />&nbsp;&nbsp;<input
    5                 type="text" name="name" id="name" />
    6         </div>
    7     </div>
    8 </body>

    2、在Jsp页面创建XMLHttpRequest对象,并且实现发送请求和响应服务器的功能。

     1 <script type="text/javascript">
     2     function loadName() {
     3         //获取XMLHttpRequest对象(有些浏览器没有XMLHttpRequest这个对象,所以获取之前需要先判断一下)
     4         var xmlHttp;
     5         if (window.XMLHttpRequest) {
     6             xmlHttp = new XMLHttpRequest();
     7         } else {
     8             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
     9         }
    10     //    alert("readyState状态:" + xmlHttp.readyState + ";status状态:"    + xmlHttp.status);
    11         xmlHttp.onreadystatechange = function() {
    12             //alert("readState状态:" + xmlHttp.readyState + ";status状态:"    + xmlHttp.status);
    13             if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
    14                 //alert("readState状态:" + xmlHttp.readyState + ";status状态:"    + xmlHttp.status);
    15                 //document.getElementById("name").value = xmlHttp.responseText;
    16                 document.getElementById("name").value=xmlHttp.responseText;
    17             }
    18         }
    19         xmlHttp.open("get", "getAjaxName", true);
    20         xmlHttp.send();
    21     }
    22 </script>

    3、编写后台处理该请求的servlet类。

     1 package com.java1234.web;
     2 
     3 import java.io.IOException;
     4 import java.io.PrintWriter;
     5 
     6 import javax.servlet.ServletException;
     7 import javax.servlet.http.HttpServlet;
     8 import javax.servlet.http.HttpServletRequest;
     9 import javax.servlet.http.HttpServletResponse;
    10 
    11 public class GetAjaxNameServlet extends HttpServlet {
    12 
    13     /**
    14      * 
    15      */
    16     private static final long serialVersionUID = 1L;
    17 
    18     @Override
    19     protected void doGet(HttpServletRequest request, HttpServletResponse response)
    20             throws ServletException, IOException {
    21         this.doPost(request, response);
    22     }
    23 
    24     @Override
    25     protected void doPost(HttpServletRequest request, HttpServletResponse response)
    26             throws ServletException, IOException {
    27         response.setContentType("text/html;charset=utf-8");
    28         PrintWriter out = response.getWriter();
    29         out.println("Ajax获取到的数据");
    30         out.flush();
    31         out.close();
    32     }
    33 
    34 }

    4、配置web.xml文件,进行代码功能的测试。

    1  <servlet>
    2       <servlet-name>getAjaxNameServlet</servlet-name>
    3       <servlet-class>com.java1234.web.GetAjaxNameServlet</servlet-class>
    4   </servlet>  
    5   <servlet-mapping>
    6       <servlet-name>getAjaxNameServlet</servlet-name>
    7       <url-pattern>/getAjaxName</url-pattern>
    8   </servlet-mapping>  

    代码测试结果的截图我就不在这上边展示了,因为主要的目的是为了用一个简单的实例说明Ajax要实现一个局部数据交互的数据流程是什么。我本人也是在摸索着学习,这篇文章几乎没啥文字叙述,上来直接就是撸代码,希望有相同兴趣的小伙伴能多多提出你们宝贵的意见,大家相互学习,共同进步。接下来我会使用Ajax 实现用户名检查省市名称查询二级联动的实例,希望大家多多批评指正!

  • 相关阅读:
    P4374 [USACO18OPEN]Disruption P
    POJ
    Git
    SpringBoot集成RabbitMQ
    GIS类型文件剖析
    SpringBoot全局异常处理
    SpringCloud Feign异常处理
    SpringBoot注解
    Restful风格接口定义
    LOD技术的理解
  • 原文地址:https://www.cnblogs.com/BaoZiY/p/10041490.html
Copyright © 2011-2022 走看看