📌 AJAX Test

<body>

	<h4>ajax를 이용한 데이터 전송</h4>
	<button type="button">확인</button>
	<div></div

<script>

$('button:button').on('click', function() {
		let request = new XMLHttpRequest();
		request.open('get', 'newTest.jsp', true);
		request.send();
		request.onreadystatechange = function() {
				if (this.readyState == 4 && this.status == 200) {
						let a = JSON.parse(this.responseText);
					  let result = "<table>";
					    	result += "<tr>";
					    	result += "<th>이름</th>";
					    	result += "<th>주소</th>";
					    	result += "<th>번호</th>";
					    	result += "</tr>";
					  $.each(a,function(){
					    	result += "<tr>";
					    	result += "<td>" + this.name + "</td>";
					    	result += "<td>" + this.addr + "</td>";
					    	result += "<td>" + this.tel + "</td>";
					    	result += "</tr>";
					  });
					  result += "</table>";
					  $('div').html(result);
				}
		};
});

ajax를 사용하면 기존 페이지에 정보를 업데이트하고 출력할 수 있다.

서버에 정보를 요청하기 위해 XMLHttpRequest객체를 생성해야한다.

let request = new XMLHttpRequest();

XMLHttpRequest객체 :
- 서버와 상호작용하기 위해 사용한다.
- 새로고침 없이 데이터를 받아오며 주로 ajax에 사용된다.

객체를 생성한 후 요청정보를 설정하고 서버로 전달해야한다.

request.open('get', 'newTest.jsp', true);
request.send();

request.open(method 방식, url, async)
- method : get방식인가 post방식인가
- url : 요청할 페이지
- async : 동기식 처리인지 비동기식 처리인지 설정
  - true : 비동기 / false : 동기
  - 동기식 처리
    - 서버와 클라이언트가 동시에 통신하여 프로세스 수행, 종료를 함께 진행한다.
    - 새로운 콘텐츠를 추가, 불러올때 페이지를 리로드하거나 이동해야 한다.
  - 비동기식 처리
    - 프로세스가 종료되어도 언제든지 필요한 정보를 요청하고 로드할 수 있다.
    - 페이지를 새로고침할 필요 없다.
    - 입력한 양식 및 정보가 그래도 유지된다.
    - 페이지에서 필요한 부분만 호출하므로 불필요한 트래픽을 줄일 수 있다.
    - 코드가 복잡해지고 디버깅하기 어려운 문제가 있다.
    - try-catch구문 적용이 어렵다.
    - but promise 구문을 사용하면 비동기식을 동기식처럼 사용할 수 있어서 try-catch적용이 가능해진다.
request.send() : 요청 정보 서버로 전달

서버로 부터 응답 데이터 받기

request.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
				let a = JSON.parse(this.responseText);
				let result = "<table>";
				   	result += "<tr>";
				   	result += "<th>이름</th>";
				   	result += "<th>주소</th>";
				   	result += "<th>번호</th>";
				   	result += "</tr>";
				$.each(a,function(){
				   	result += "<tr>";
				   	result += "<td>" + this.name + "</td>";
				   	result += "<td>" + this.addr + "</td>";
				   	result += "<td>" + this.tel + "</td>";
				   	result += "</tr>";
				});
				result += "</table>";
				$('div').html(result);
		}
};

request.onreadystatechange = function(){}
- XMLHttpRequest객체의 readyState값이 변할 때마다 자동으로 호출되는 함수를 설정한다.
  - XMLHttpRequest객체명.onreadystatechange = 호출되는 함수(){내용}
- 이 속성을 사용해서 서버에 요청한 데이터의 존재 및 응답 도착의 순간을 특정한다.

readyState 프로퍼티

readyState 프로퍼티는 XMLHttpRequest 객체의 현재 상태를 나타낸다.
이 프로퍼티의 값은 객체의 현재 상태에 따라 다음과 같은 주기로 변화한다.

상태	코드 값	설명
UNSENT	0	XMLHttpRequest 객체가 생성됨.
OPEND	1	open() 메소드가 성공적으로 실행됨.
HEADERS_RECEIVED	2	모든 요청에 대한 응답이 도착함.
LOADING	3	요청한 데이터를 처리 중임.
DONE	4	요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨.

status 프로퍼티

status 프로퍼티는 서버의 문서 상태를 나타난다.

상태 코드	설명
200	서버에 문서가 존재, 정상적으로 응답을 받음
403	요청 오류
404	서버에 문서가 존재하지 않음, 페이지를 찾지 못함
500	서버에러

JSON데이터 파싱하기

let a = JSON.parse(this.responseText);
$.each(a,function(){
		let result = "<table>";
				result += "<tr>";
				result += "<td>" + this.name + "</td>";
				result += "<td>" + this.addr + "</td>";
				result += "<td>" + this.tel + "</td>";
				result += "</tr>";

$.each(배열 , function(index, value){ result = this.key값 });
- JSON 객체가 배열로 존재할 때 여러개의 데이터를 꺼내오려면 each메소드를 사용한다.
- each를 사용하면 for, while처럼 배열을 순회하며 데이터를 꺼내온다.