用WebServlet注解的urlPatterns属性指定URL pattern_webservlet注解urlpatterns-CSDN博客

本文链接：https://blog.csdn.net/panghuangang/article/details/142084863

https://jakarta.ee/specifications/servlet/6.0/apidocs/jakarta.servlet/jakarta/servlet/annotation/webservlet

在eclipse中创建了一个web项目，然后创建一个servlet：
在这里插入图片描述

JSAjaxServelet文件：

package com.thb;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * Servlet implementation class JSAjaxServelet
 */
@WebServlet(urlPatterns="/js_ajax")
public class JSAjaxServelet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public JSAjaxServelet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// response.getWriter().append("Served at: ").append(request.getContextPath());
		System.out.println("接收到了ajax请求服务器!");
		//给客户端浏览器响应数据
		response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
		response.getWriter().write("hello world");
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

启动tomcat：
在这里插入图片描述

在浏览中直接访问：
在这里插入图片描述

在html页面中通过ajax访问：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>
  <input type="button" value="发送ajax异步请求服务器" onclick="butOnclick()">

  <div id="myDiv"></div>

  <script>
    function butOnclick() {
      const xmlhttp = new XMLHttpRequest()
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
          document.getElementById('myDiv').innerHTML = xmlhttp.responseText
        }
      }

      xmlhttp.open('GET', 'http://localhost:8080/jsajaxproject/js_ajax', true)
      xmlhttp.send()
    }
  </script>
</body>

</html>