jspblog : ajax - XMLHttpRequest, jquery, fetch

2021-01-20 04:15:39 +09:00
parent 847ae74548
commit 94dcf7b936
2 changed files with 62 additions and 0 deletions
--- a/jspblog/src/main/java/com/example/jspblog/test/AjaxTest.java
+++ b/jspblog/src/main/java/com/example/jspblog/test/AjaxTest.java
@@ -0,0 +1,27 @@
+package com.example.jspblog.test;
+
+import javax.servlet.ServletException;
+import javax.servlet.annotation.WebServlet;
+import javax.servlet.http.HttpServlet;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import java.io.IOException;
+import java.io.PrintWriter;
+
+@WebServlet("/ajax")
+public class AjaxTest extends HttpServlet {
+    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
+        doProcess(request, response);
+    }
+
+    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
+        doProcess(request, response);
+    }
+
+    protected void doProcess(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
+        System.out.println("ajax 호출");
+        PrintWriter out = response.getWriter();
+        out.print("OK");
+        out.flush();
+    }
+}
--- a/jspblog/src/main/webapp/test/ajaxtest.jsp
+++ b/jspblog/src/main/webapp/test/ajaxtest.jsp
@@ -0,0 +1,35 @@
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<html>
+<head>
+    <title>Title</title>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+</head>
+<body>
+    <button onclick="idCheck()">아이디 있니?</button>
+    <div id="box"></div>
+<script>
+    function idCheck() {
+        // const xhttp = new XMLHttpRequest();
+        // xhttp.onreadystatechange = function() {
+        //     if (this.readyState === 4 && this.status === 200) {
+        //         // document.getElementById("demo").innerHTML = this.responseText;
+        //         const box = document.querySelector("#box");
+        //         if (this.responseText === 'OK'){
+        //             box.innerHTML = "아이디 중복"
+        //         } else {
+        //             box.innerHTML = "아이디 사용 가능"
+        //         }
+        //     }
+        // };
+        // xhttp.open("GET", "http://localhost:8080/jspblog/ajax", true);
+        // xhttp.send();
+
+        // $.ajax("http://localhost:8080/jspblog/ajax").done(function (data) {
+        //     alert(data);
+        // })
+
+        fetch("http://localhost:8080/jspblog/ajax").then(v => v.text()).then(v => alert(v));
+    }
+</script>
+</body>
+</html>