AJAX 동기, 비동기(get,post) 요청

AJAX (비동기 자바스크립트와 xml)

웹 동기 요청 :

요청을 보내면 응답페이지를 받아온다. 전체 페이지가 바뀐다.

웹 비동기 요청 :

응답페이지가 출력된 상태에서 요청을 보낸다. 페이지 이동이 없고 결과로 텍스트, json,xml 데이터를 받는다. 이 데이터를 파싱해서 Dom으로 페이지 일부만 수정한다.

 

차이

동기 : 새로운 페이지로 결과값을 보낸다.

비동기 : 해당 페이지에서 할당된 공간에 결과값을 보낸다.

서버에서 요청에 대한 응답이 오면 결과 페이지로 이동하는지, 아니면 결과를 텍스트로 받아와 현재 페이지에 결과를 보여주는지에 대한 차이다.

 

 

웹 동기 요청

<input type = "submit" value ="동기요청" onclick = "a()">

<form action = "${pageContext.request.contextPath }/ajaxtest/gettest" method ="get" name = "f">
name : <input type = "text" name = "name"><br/>
<input type = "submit" value ="동기요청" >
</form>

 

 

 

비동기 요청 방법

1. 비동기 request 객체를 생성한다.

const xhttp = new XMLHttpRequest();

 

2. 응답을 받았을 때 자동 호출될 함수를 등록한다.

※ onload : 이벤트 핸들러를 등록하는 속성이다.

※ 익명함수 : 이름 없는 함수이다. 핸들러 용도로만 사용하겠다는 의미이다.

xhttp.onload = function(){
	//받은 응답을 가지고 처리 코드 작성
}

 

3. 비동기 요청 설정

param 1: 전송방식이다. post,get,patch,update,delete

param 2: 요청받을 서버 페이지 경로이다.

xhttp.open(”GET”, “ajax_info.txt”);

 

4. 요청 보냄

send 메소드 호출하면 위에서 지정된 전송방식 GET으로 보낸다.

xhttp.send();

 

 

1. get 비동기 요청

function a(){
	// (2)비동기 요청의 객체를 생성한다. 
	const xhttp = new XMLHttpRequest();

	// (6) 비동기 요청의 응답이 왔을 때 자동 실행될 핸들러
	xhttp.onload = function(){ //response를 받으면 실행한다.
		let res = document.getElementById("res"); //res 범위에 내용을 작성해준다.
		res.innerHTML = xhttp.responseText; 
	}
	// (3) 경로 설정 후 값을 전송해준다.
	let param = "?name=" + f.name.value; 
	xhttp.open("GET", "${pageContext.request.contextPath}/ajaxtest/gettest" + param); //경로설정
	xhttp.send(); //전송
}

-----------------------------------------------------------------------------

name : <input type = "text" name = "name"><br/>
// (1) onclick 으로 함수 a()로 이동한다.
<input type = "button" value = "ajax get 요청" onclick = "a()">

 

 

 

2. post 비동기 요청

get 비동기 방식과의 차이점
1. x	xhttp.setRequestHeader (...) 추가
2. let param = "?name="	값 이름 앞 ? 제거
3. xhttp.send()	xhttp.send(param), open에 param을 추가하는 것이 아닌 send에 추가

function b(){
	const xhttp = new XMLHttpRequest();
	
	xhttp.onload = function(){
		let res = document.getElementById("res");
		res.innerHTML = xhttp.responseText; 
	
	}

	let param = "name=" + f.name.value;
	xhttp.open("POST", "${pageContext.request.contextPath}/ajaxtest/gettest" );
	xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
	//post에서는 header의 content 타입을 설정해 줘야한다.
	xhttp.send(param); 
}

------------------------------------------------------

name : <input type = "text" name = "name"><br/>
<input type = "button" value = "ajax post 요청" onclick = "b()">

 

 

비동기 요청. DOM

DOM의 역할 : 화면 실시간 갱신

document.getElementById

 

 

*. Servlet (동일)

request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");

	// (4) 이전 페이지에서 보내준 값(이름) 받기
String name = request.getParameter("name");
response.getWriter().append("get: hello " + name + "~~");
	// (5) 응답 페이지에 출력할 출력 스트림을 생성후, response로 응답을 보내준다.
	//서블릿은 주로 응답을 주지만 출력도 가능하다.
	//서블릿에서 결과값을 가져가려면 getWriter 로 출력

 

 

응답 핸들러 함수 (xhttp.onload = function())

1. 객체 

let val = xhttp.responseText;	이전페이지에서 받아온 응답값을 변수 val 에 넣어준다.
let obj = JSON.parse(val);	val 에 응답값을 파싱(parse) 해주고, 그 값을 변수 obj에 담는다.
alert(obj.name); alert(obj.num);	alert 로 obj 응답값의 name, num 을 보여준다.

xhttp.onload = function(){
	let val = xhttp.responseText;	
	let obj = JSON.parse(val);
	alert(obj.name);
	alert(obj.num);
}

 

2. 배열

let val = xhttp.responseText; let arr = JOSN.parse(val);	이전페이지에서 받아온 응답값을 변수 val 에 넣어준다. val 에 응답값을 파싱(parse) 해주고, 그 값을 변수 obj에 담는다.
let html ='';	변수 html 선언하고 초기화해준다.
for(let obj of arr){ html += 'name:'+obj.name+'<br/>'; html += 'num:'+obj.num+'<br/>'; }	arr 배열에서 name , num을 하나씩 꺼내준다.
let div = document.getElementById("res");	id가 res인 요소를 찾아 변수 div에 할당하고
div.innerHTML = html;	해당 요소의 내부 HTML을 html로 변환한다.

xhttp.onload = function(){
	let val = xhttp.responseText;
	let arr = JOSN.parse(val);
	let html ='';
	for(let obj of arr){
	html += 'name:'+obj.name+'<br/>';
	html += 'num:'+obj.num+'<br/>';
	}
	let div = document.getElementById("res");
	div.innerHTML = html;
}