Ajax Get과 Post

Ajax Post방식과 Get방식

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
${param.name}


Get 방식

<button onclick="ajaxReq()">2. 비동기 요청</button> <br>
<div id="dataView"></div>

<script type="text/javascript">
    function ajaxReq() {
        //요청 객체
        let xhr = new XMLHttpRequest();
        //속성에 요청~응답 완료까지 감지하는 로직 구현

        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4 && xhr.status == 200) {
                document.getElementById("dataView").innerHTML = xhr.responseText;
            }
        };
        xhr.open("GET", "response.jsp?name=kim&age=20", true);
        xhr.send();
    }
</script>

parameter를 url에 담아서 보낸다.


Post 방식

<button onclick="ajaxReq()">비동기 요청</button> <br>
<div id="dataView"></div>

<script type="text/javascript">
    let xhr;

    function ajaxReq() {
        xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4 && xhr.status == 200) {
                document.getElementById("dataView").innerText = xhr.responseText;
            }
        };

        xhr.open("POST", "response.jsp", true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send("name=kim&age=20");
    }

</script>

parameter를 따로 send 메소드를 사용해 보낸다.

Discussion and feedback