728x90
Ajax
GET 방식, POST 방식 통신 비교
AJAX (Asynchronous JavaScript and XML, 에이잭스)
JavaScript의 라이브러리중 하나이며 클라이언트와 서버간에 XML 데이터를 요청하고 응답한다.
웹페이지를 reload하지 않고 데이터를 불러오는 비동기 방식이다. GET 방식과 POST 방식이 있다.
- GET 방식
지정된 요청명으로부터 데이터를 요청해 가져온다.
url에 데이터가 보이게 담아온다.
<%@ 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();
//서버와 비동기통신을 하면서 readyState값이 지속적으로 변경된다.
xhr.onreadystatechange = function(){ //onreadystatechange로 값 변경될때마다 익명함수를 콜백
alert("상태값 : "+xhr.readyState)
//xhr.readyState 가 0인 경우 : request가 초기화되지 않음
// 1 : 서버와 연결됨
// 2 : 요청 받음
// 3 : 요청처리중
// 4 : 처리 끝나고 응답 대기중
if(xhr.readyState==4 && xhr.status==200){ //200 : 정상작동, 404: 오류
document.getElementById("result").innerHTML = xhr.responseText;
}
}
//요청설정
xhr.open("GET", "/serverweb/ajaxtest01?id="+myform.id.value, true);
//비동기 통신으로 요청보내기
xhr.send();
}
</script>
<% String msg = (String)request.getAttribute("msg"); //msg속성가져오기 %>
</head>
<body>
<h1> Ajax테스트하기 </h1>
<form name="myform">
<input type="text", name="id">
<button type="button" onclick="runAjax()">Ajax테스트</button>
</form>
<div id="result">
</div>
</body>
</html>
- POST 방식
가진 데이터를 지정된 리소스에 제출한다.
POST도 데이터를 가져오지만 HTTP message body 안에 담아온다.
<%@ 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">
var xhr;
function runAjax(){
//비동기통신을 할 수 있는 자바스크립트 객체를 생성 - XMLHttpRequest
xhr = new XMLHttpRequest();
//서버와 비동기통신을 하면서 readyState값이 지속적으로 변경된다.
xhr.onreadystatechange = readyCallback; // onreadystatechange로 값 변경될때마다 콜백
//요청설정
xhr.open("POST", "/serverweb/ajaxtest_post", true);
//POST니까 요청 헤더에 Content-Type넣어서 form태그-submit버튼으로 요청하는 것처럼
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//비동기 통신으로 요청보내기
xhr.send("id="+myform.id.value);
}
function readyCallback(){
//alert("상태값 : "+xhr.readyState)
if(xhr.readyState==4 && xhr.status==200){ //200 : 정상작동, 404: 오류
document.getElementById("result").innerHTML = xhr.responseText;
}
}
</script>
<% String msg = (String)request.getAttribute("msg"); //msg속성가져오기 %>
</head>
<body>
<h1> Ajax테스트하기 </h1>
<form name="myform">
<input type="text", name="id">
<button type="button" onclick="runAjax()">Ajax테스트</button>
</form>
<div id="result">
</div>
</body>
</html>
728x90
댓글