POST방식으로 요청하는 경우는 Ajax문법 게시물에서 언급하였습니다. 간단한 POST 방식의 요청은 GET방식과 동일하며 다음과 같이 method부분만 POST로 변경합니다.
xhr.open("POST", "test.jsp", true);
xhr.send();
그러나 HTML폼 태그에 입력한 데이터를 보내려면 setRequestHeader()를 이용하여 HTTP 헤더에 내용을 추가해야 합니다. 또한 사용자가 입력한 폼데이터는 send메소드를 호출할때 보내지도록 작성합니다.
|
Method |
설명 |
|
setRequestHeader(header, value) |
header : 헤더명 value : 헤더의 값 |
POST방식인 경우 다음과 같이 코드를 수정한다.
xhr.open("POST", "test.jsp", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("id="+myform.id.value);
- open메소드의 요청방식은 POST로 변경합니다.
- setRequestHeader메소드를 이용하여 "Content-type"를
"application/x-www-form-urlencoded"로 셋팅해야 합니다.
Content-type은 request에 포함되어야 하는 데이터의 타입을 정의해야 하는 경우 지정하며
POST방식으로 요청하는 경우 반드시 정의해야 합니다.
"application/x-www-form-urlencoded"는 웹브라우저가 폼 태그를 이용해서 입력한 사용자
의 데이터를 POST방식으로 전송할때 사용하는 표준 MIME type이며 key=value의 유형으로
인코딩을 합니다.
- 사용자가 입력한 데이터는 send메소드의 매개변수로 전송합니다.
ajaxtest01.jsp를 ajaxtest01_POST.jsp로 저장한 코드를 수정합니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function runAjax(){
//비동기통신을 할 수 있는 객체를 생성 - XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
document.getElementById("mydiv").innerHTML = xhr.responseText;
}
}
//POST방식으로 요청하기
xhr.open("POST", "test.jsp", true);
xhr.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xhr.send("id="+myform.id.value);
}
</script>
</head>
<body>
<h1>Ajax테스트 하기</h1>
<form name="myform">
<input type="text" name="id">
</form>
<button type="button" onclick="runAjax()">Ajax테스트</button>
<div id="mydiv"></div>
</body>
</html> '웹 > Ajax' 카테고리의 다른 글
| GET방식으로 Ajax요청하기 (0) | 2019.08.12 |
|---|---|
| Ajax문법 (0) | 2019.08.12 |
| Ajax의 개요 (0) | 2019.08.11 |