Acorn academy 01/15 ajax

서블릿 주소 호출에 관하여 알아둬야할 부분

webapp이랑 com.controller랑 같은 파일단이라고 생각하고 href등을 작성

Ajax

아래와 같은 비동기처리 코드의 경우

sample02_json3_1.jsp 파일에
get방식으로
data:{}를 폼데이터 파라미터로 보내고
dataType으로 결과값을 받는다.
받은 결과값은 success 또는 error에서 사용할 수 있다.

이상한점 : 기본적으로 ajax의 결과값을 얻는 방식은 응답하는 쪽에서 출력하는 값을 결과값으로 받아들인다.

$.ajax(
			{
				type: "get",
				url: "sample02_json3_1.jsp",
				data: {
					v1: $("#v1").val(),
					v2: $("#v2").val()
				},
				dataType: "json",
				success: function(data, status, xhr){
					$.each(data, function(){
						console.log(data);
					})
				},
				error: function(){
					console.log("실패", data);
					$("#result").append(error);
				}
				
			} //json

text로 받은 것 json으로 타입캐스팅해서 json으로 변경후 사용

function getData2(){
		$.ajax(
			{
				type: "get",
				url: "sample02_json.jsp",
				data: {
					v1: $("#v1").val(),
					v2: $("#v2").val()
				},
				dataType: "text",
				success: function(data, status, xhr){
					var jsonData = jQuery.parseJSON( data );
					var jsonData2 = JSON.parse(data);
					console.log("성공", data);
					console.log("data.username", jsonData2.username);
					console.log("data.age", jsonData2.age);
					$("#result").text(jsonData2.username+" "+ jsonData2.age);
					//$("#result").append(status + " status / ");
					//$("#result").append(xhr + " xhr / ");
					
				},
				error: function(){
					console.log("실패", data);
					//$("#result").text(xhr + " xhr / ");
					//$("#result").append(status + " status / ");
					$("#result").append(error);
				}
				
			} //json
		) //ajax

결과값으로 배열을 받은 경우 배열 안의 데이터타입 기준으로 dataType:을 입력하면 결과값을 적절히 사용할 수 있다.

cors Response Header 설정

시나리오
ex ) html, jsp가 각각 서버가 다른 경우
1) 학생용 서버: 비동기 요청.html 8085
2) 교수용 서버: jsp 파일에서 응답처리 8088

응답하는 서버 쪽에서 cross 도메인 문제 수락설정이 필요 : cors(Cross Origin Resource Sharing) / 즉, 권한부여

응답하는 서버의 서블릿/jsp에서 response의 헤더에 Access-Control-Allow-Origin 설정이 필요하다.
response.setHeader("Access-Control-Allow-Origin", "*");
모든 주소에 대한 허락을 해주겠다는 설정

지금은 사용자와 서버가 같지만, 실제로는 사용자와 서버가 다르기 때문에 해당 header 설정이 필수로 사용된다.