[목차]
8. Ajax
8. Ajax(Asynchronous Javascript And XML)
| client | request ---------> response <--------- |
server |
| 1) 클라이언트의 뷰페이지에서 요청을 보낸다. 2) XMLHttpRequest객체가 생성. 3) 요청처리. 6) 응답받은 메시지를 자바스크립트에서 처리.(응답되는 데이터를 가지고 부분 화면을 변경하기 위해서 javascript와 DOM(JQuey) 사용) 7) 페이지를 업데이트. |
4) 서버에서 request를 받는다. 5) request에 대한 처리(DBMS액세스) 후 클라이언트에 응답을 보낸다. (데이터, 문자열, xml, json) |
[jsp]
1) 버튼을 누르면 ajax요청을 하기 위해서 runAjax함수 호출.
<body>
<form name = "myform">
<input type="text" name="id">
<button type="button" onclick="runAjax()">Ajax테스트</button>
</form>
<div id="result"></div>
</body>
2) 비동기통신 처리를 할 수 있는 자바스크립트 객체를 생성 - XMLHttpRequest
<script type="text/javascript">
function runAjax(){
var xhr = new XMLHttpRequest();
3-1) 요청설정
open("request타입",url,true-async, false-sync)-GET
xhr.open("GET","servlet 경로?id="+myform.id.value, true);
- POST
xhr.open("POST","/serverweb/ajaxtest_post.do", true);3-2) 요청보내기 - 비동기 통신으로 요청을 보낸다.
-GET
send(); // get방식 xhr.send();- POST
send("문자열"); // post방식 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("id="+myform.id.value); => 요청헤더에 content-type을 변경.
=> form태그를 이용해서 요청하고 있지 않지만 form태그를 이용해서 요청하는 것처럼 key=value의 형식으로
인코딩을 적용 .
=> ajax요청을 submit버튼을 눌러 요청할때 처럼 key를 이용해서 value를 추출해야 하므로 반드시 설정해야
하는 정보.
[servlet]
4) 서버에서 request를 수신 - 처리
String id = request.getParameter("id");
String msg="";
if(id.equals("이미 존재하는 ID")) { // DBMS에서 처리
msg="사용불가능 id";
}else {
msg="사용가능 id";
}
5) 클라이언트에 응답하기 위한 메시지를 만들어서 응답
(문자열이 하나인 경우 변수처리해서 보낸다. json라이브러리를 이용해서 json객체를 만들어서 응답)
- GET
response.setContentType("text/html;charset=UTF-8");
PrintWriter pw= response.getWriter();
pw.print(msg);- POST
response.setContentType("text/html;charset=UTF-8");
response.setHeader("cache-control", "no-cache, no-store");
PrintWriter pw= response.getWriter();
pw.print(msg);
=> response의 헤더 값을 변경.
=> html을 요청하는 것이 정적 리소스를 요청하는 작업이고 요청이 될때마다 서버에서 작업을 수행하고 실행해서
결과를 가져오는데 이를 비효율적이라 판단해서 기본설정이 동일한 요청이 들어왔을떄 캐쉬에서 저장하고
있는 파일을 보여준다.
결과를 캐쉬에 저장하면 다음 요청에 대한 결과가 제대로 나오지 않을 수 있다. 그래서 응답결과를 캐쉬에 저장
하지 말고 서버에서 바로바로 요청해서 보여줄 수 있도록 헤더값에 설정.
[jsp]
6) 서버와 비동기 통신을 하면서 XMLHttpRequest가 갖고 있는 readyState값이 지속으로 변경
변경될때 마다 onreadystatechange이벤트가 발생하며 이 이벤트를 처리하기 위해서 익명함수를 콜백으로 정의
xhr.onreadystatechange = function(){ // 함수 자동호출
if(xhr.readyState == 4 && xhr.status==200){
// 비동기 통신이 정상처리, http응답도 정상처리
document.getElementById("result").innerHTML = xhr.responseText;
}
}
}
</script> xhr.onreadystatechange = readyCallback;
}
function readyCallback(){
if(xhr.readyState == 4 && xhr.status==200){
document.getElementById("result").innerHTML = xhr.responseText;
}
}
</script>* readyState
0: request가 초기화되지 않은 상태
1: 서버와 연결이 된 상태
2: 요청을 받은 상태
3: 요청을 처리하고 있는 상태
4: 요청처리가 끝나고 응답 대기 상태
* status
200 : 정상완료
404 : 페이지가 존재하지 않는 경우
* 서버응답 처리 객체
responseText : String데이터를 get으로 응답받은 경우 사용
responseXML : XML데이터를 get으로 응답받은 경우 사용
'BACK END > Servlet' 카테고리의 다른 글
| [Servlet] Servlet 정리7 - JDBC (0) | 2021.01.06 |
|---|---|
| [Servlet] Servlet 정리6 - EL, JSTL (0) | 2021.01.04 |
| [Servlet] Servlet 정리4 - Cookie, Session (0) | 2021.01.02 |
| [Servlet] Servlet 정리3 - jsp, mvc, forward, include, request (0) | 2020.12.30 |
| [Servlet] Servlet 정리2 - JDBC (0) | 2020.12.28 |