#3-1 / ajax + .do

CLASS/AJAX

#3-1 / ajax + .do

hingu 2024. 7. 2. 11:11

ajax data 통신

do 통신을 할 경우 - 결과에 대해서만 write (배열,문자열,결과값)

⚡ ajax <-> .do 파일 data 전송

- ajax1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax로 select 값 변경</title>
</head>
<body>
<select onchange="infodata(this.value)">
	<option value="data1">데이터1</option>
	<option value="data2">데이터2</option>
	<option value="data3">데이터3</option>
</select>
<div id="dataload">
데이터 출력
</div>
</body>
<script>
function infodata(z){
	var http,result;
	http = new XMLHttpRequest();
	http.onreadystatechange = function(){
		if(http.readyState==4 && http.status==200){
			console.log(this.response)
		}
	}
	http.open("post","./ajax2.do",true);
	http.setRequestHeader("content-type","application/x-www-form-urlencoded");
	http.send("idx="+z);
}
</script>
</html>

- ajax2.do(servlet)

public class ajax2 extends HttpServlet {
	private static final long serialVersionUID = 1L;
	//get두 되구 post두 되구
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		PrintWriter pw = response.getWriter();
		
		String idx= request.getParameter("idx");
		pw.write(idx); //바로 console에 찍힘
		
		pw.close();
	}
}

print.write => console.log(this.response) 요렇게 찍힘

❗ dispatcher 사용시 주의 : ajax로 호출시 dispatcher는 작동하지 않음(form,location.href일때만 작동)

⚡ 이렇게 보내두댐 1

- ajax2.do (servlet)

String data1 = "[조선호텔]";
String data2 = "방1, 주방1, 거실1, 화장실1";
String data3 = "168000";

StringBuffer sb = new StringBuffer();
sb.append(data1);
sb.append(data2);
sb.append(data3);
pw.write(sb.toString()); //문자열로 보내서 split 하는 방법

⚡ 이렇게 보내두댐2 (배열루)
eval로

- ajax1.jsp
eval : 변수를 script화 시키는 애

<body>
<select onchange="infodata(this.value)">
	<option value="data1">데이터1</option>
	<option value="data2">데이터2</option>
	<option value="data3">데이터3</option>
</select>
<div id="dataload">
데이터 출력
</div>
</body>
<script>
function infodata(z){
	var http,result;
	http = new XMLHttpRequest();
	http.onreadystatechange = function(){
		if(http.readyState==4 && http.status==200){
			eval(this.response);
			console.log(data);
		}
	}
	http.open("post","./ajax2.do",true);
	http.setRequestHeader("content-type","application/x-www-form-urlencoded");
	http.send("idx="+z);
}
</script>

- ajax2.do (servlet)
eval로 front-end에서 받을시 <script>태그는 사용 X !!

String data1 = "[조선호텔]";
String data2 = "방1, 주방1, 거실1, 화장실1";
String data3 = "168000";

pw.write("var data = new Array();" //<script> 넣으면 안됨
+ "data.push('"+ data1 +"');"
+ "data.push('"+ data2 +"');"
+ "data.push('"+ data3 +"');");


/* 반복문 사용도 가능
pw.write("var data = new Array();");
int w=0;
while(w<3) {
    pw.write("data.push('"+ data1 +"');"); //ajax로 response 받는 값

    w++;
}
*/