Written by
최태열
on
on
Ajax Get과 Post
Ajax Post방식과 Get방식
- response.jsp
<%@ 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