ajax----------3、GET请求示例_school3 get请求 ajax-优快云博客

本文介绍了一个简单的Ajax与Servlet交互的例子。首先创建了一个Servlet用于响应请求，并输出字符串“Helloajax”。接着，在Ajax1.jsp文件中通过按钮触发Ajax请求，调用Servlet并接收其返回的数据，最终将结果显示在h1标签内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一,建立一个Servlet

很简单的通过response输出一个响应体.

@WebServlet(name = "AServlet",urlPatterns = "/servlet/as")
public class AServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("hello ajax");
        response.getWriter().print("Hello ajax");
    }
}

二,建立一个Ajax1.jsp文件

在该jsp文件中,建立一个button标签,一个h1标签.
当点击button标签的时候,通过Ajax发起请求,访问服务器中的AServlet,将返回的响应体中的内容,设置到h1标签中.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <title>Ajax示例1</title>
  <script type="text/javascript">

    function createXMLHttpRequest() {
      try {
          //大多数浏览器
          return new XMLHttpRequest();
      } catch (e) {
          try {
              //IE6.0版本
              return new ActiveXObject("Msxml2.XMLHTTP");
          } catch (e) {
              try {
                  //IE5.5及更早版本
                  return new ActiveXObject("Microsoft.XMLHTTP");
              } catch (e) {
                  alert("三个都不符合,这是不是就尴尬了");
                  throw e;
              }
          }
      }
  }

  //文档加载完毕后执行
  window.onload = function () {
      //获得id为btn的按钮元素
      var btn = document.getElementById("btn");
      //当按钮被点击时执行
      btn.onclick = function () {
          /**
           * 四步Ajax操作
           * 发送请求,得到服务器的响应
           * 将响应结果响应到h1元素中
           */
              //1,得到异步对象
          var xmlHttp = createXMLHttpRequest();

          //2,打开与服务器的连接
          //参数1:指定请求方式
          //参数2:指定请求的URL
          //参数3:指定是否为异步请求
          xmlHttp.open("GET", "/hajax/servlet/as", true);

          // 关于第二个参数的写法:当浏览器显示当前页面时,是以html的方式显示的,
          // 也就是说,当服务器将当前页面发送给浏览器时,已经将.jsp文件转换成.html文件了
          // 所以到客户端的时候,已经没有这种jsp标签了,到客户端的时候,就等同于:/hajax/servlet/as了
          <%--xmlHttp.open("GET","<c:url value="servlet/as"/>",true);--%>

          //3,发送请求
          //GET请求没有请求提,但也要给出null,不然可能会有浏览器发送不成功
          xmlHttp.send(null);

          //4,给异步对象xmlHttp的onreadystatechange事件注册监听器
          xmlHttp.onreadystatechange = function () {
              //当xmlHttp的状态发生变化时执行
              if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                  //若xmlHttp的状态为4(服务器响应结束了),服务器的响应码为200(说明响应成功)

                  //获取服务器的响应结果
                  var text = xmlHttp.responseText;

                  //获取h1元素
                  var h1 = document.getElementById("h1");

                  //设置内容
                  h1.innerHTML = text;
              }
          };
      };
    };
  </script>
</head>
<body>
<button id="btn">click here</button>
<h1 id="h1"></h1>
</body>
</html>

三,效果

AjaxGET请求示例