[JSP] Ajax(Asynchronous Javascript and XML), GET/POST 방식

* GET 방식과 POST 방식

- GET이 기본이고 필요할 때 POST 사용

- 전송할 데이터 양이 적고 노출되어도 무방하다면 GET 방식을 기본으로 사용하고, 전송할 데이터의 양이 크거나 노출이 되면 안 될 데이터라면 POST 방식을 사용

• GET 방식
  - 주소에 데이터를 추가해서 전달하는 방식, 쿼리스트링에 포함되어 전송되므로 길이의 제한이 있으며 주소에 데이터가 보이므로 보안상 취약점이 존재
  query string : url 뒤에 ? 이후의 문자열 "키1=값1&키2=값2&..."
• POST 방식
  - 데이터를 별도로 요청 body에 첨부하여 전달하는 방식
  - 브라우저의 히스토리에도 남지 않고 데이터는 쿼리 문자열과는 별도로 전송
  - 따라서 데이터의 길이에 대한 제한도 없고 GET 방식보다 보안성이 좋음
  - 하지만 GET 방식보다 상대적으로 느림
  - POST로 보내진 데이터들을 꺼내올 때에는 encoding을 먼저 거쳐줘야 함

1. Ajax(Asynchronous Javascript and XML)

- 비동기식 자바스크립트와 XML(비동기식 : 2개를 같이 써도 무관)

- 클라이언트와 서버의 통신을 한 개가 아닌 두 개로 하는 것

- 빠르게 동작하는 웹 페이지를 만들기 위한 개발 기법

- 페이지 이동 없이 비동기 통신을 통해서 서버에서 바뀔 내용(데이터)만 받아오고 자바스크립트 DOM을 이용해 페이지의 내용만 바꿔주는 것

- Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있고 백그라운드 영역에서 서버와 통신하여 그 결과를 웹 페이지의 일부분에만 표시할 수 있음

- 이때 서버와 데이터를 주고받을 수 있는데 대표적인 데이터는 JSON, XML, HTML, 텍스트 등이 있음

- 즉, 메인 통신 말고도 다른 길을 만들어 데이터만 주고받아 페이지의 내용만 바꿔주는 것

2. Ajax의 장점 및 단점, 구성요소

• 장점
  - 웹 페이지를 변화시키기 위해 다시 로딩을 할 필요가 없다.
  - 웹 페이지가 로드된 후에 서버에 데이터 요청을 보내거나 받을 수 있다.
  - 다양한 UI(동적인 페이지) 구현이 가능해진다.
• 단점
  - 페이지의 이동이 없기 때문에 히스토리 관리가 안된다.
  - 반복적인 데이터를 빠르게 요청하면 느려지거나 작동하지 않게 된다.
  - 페이지의 이동이 없다는 것은 보안 상의 문제도 발생할 수 있다는 것이다.
• 구성요소
  - 웹 페이지의 표현을 위한 HTML, CSS
  - 데이터의 교환을 위한 JSON, XML 등
  - 웹 서버와의 비동기식 통신을 위한 XMLHttpRequest(뒷 길)
  - 통신 결과를 통해 화면 구성을 동적으로 조직하기 위한 자바스크립트 DOM 모델

3. XMLHttpRequest 객체

- Ajax의 가장 핵심적인 구성 요소는 바로 XMLHttpRequest 객체이다.

- 이 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용한다.

- 웹 브라우저가 백그라운드에서 서버와 계속해서 통신할 수 있는 것은 바로 XMLHttpRequest 객체를 사용하기 때문이다.

- 즉, 메인 길도 XMLHttpRequest 객체를 사용하고 있는 것이고 우리가 다른 길(뒷 길)을 이용해 사용하기 위해서도 XMLHttpRequest 객체를 새로 하나 만들어 줘야 한다.(XMLHttpRequest 객체 두 개 사용)

const xhr = new XMLHttpRequest();

4. 서버에 요청

- Ajax에서는 XMLHttpRequest 객체를 사용해서 서버와 데이터를 교환함

- 따라서 서버에 요청을 보내기 위해서는 먼저 XMLHttpRequest 객체를 생성해야 하고 객체의 open() 메소드를 통해 통로를 열어주고 send() 메소드를 사용해서 요청을 보내주는 과정을 거쳐야 한다.

• open()
  - 서버로 보낼 Ajax 요청의 형식을 설정
  - 이 메소드로 통로를 완성

xhr.open("GET", "checkId_db.jsp?userid"+userid, true);
xhr.open("POST", "checkId_db", true);

전달 방식 : GET, POST, ...
URL 주소 : 요청을 처리한 서버의 파일 주소 전달
비동기 여부 : 요청을 동기식으로 전달할지 비동기식으로 전달할지를 선택

* 전달 방식이 POST라면 body에 데이터가 저장되어 전달이 되므로 body를 데이터로 읽겠다는 encoding을 해줘야 한다.

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

• send()
  - 작성된 Ajax 요청을 서버로 전달하는 메소드
  
  xhr.send(); : GET 방식 - 주소창에 적어서 보내줌
  xhr.send("키=값&키=값...); : POST 방식 - 주소창에 적으면 안 되므로 매개변수로 같이 보내줌

- Ajax 요청 시 XMLHttpRequest 객체는 각 상태별로 readyState가 바뀐다.

- 초기 : 0(XMLHttpRequest.UNSET, 보내지 않음)

- open() 메소드를 호출 : 1(XMLHttpRequest.OPENED)

- send() 호출 : 순차적으로 2(XMLHttpRequest.HEADERS_RECEIVED), 3(XMLHttpRequest.LOADING), 4(XMLHttpRequest.DONE)로 바뀐다.

- readyState가 4가 된다면 상태 코드(XMLHttpRequest 객체.status)가 성공을 가리키는 200이나 201일 때 응답을 확인

5. 예시

- 아이디 중복 체크를 위해 페이지 이동 없이 Ajax를 이용

- 회원가입을 위해 아이디 중복체크를 하는 데 중복체크 버튼을 누르면 checkId()라는 함수가 실행되고 그 결과에 따라 id가 result인 <span>태그에 문자열이 나타남
* onkeyup="함수명()"을 이용하면 키가 누르고 올라갈 때마다 함수를 실행하게 해 키 하나하나 적을 때마다 중복체크 함수가 실행되 실시간으로 문자열이 나타나게 되서 중복체크를 할 수 있는 방법도 있다.

- 중복체크를 위해 비교할 아이디를 받기 위해 input 태그 객체를 변수로 받고 if문으로 그 태그 객체의 value가 비어있으면 결과 창도 같이 비워주게 해준다.

- 그게 아니라면 Ajax를 이용해 페이지 이동 없이 페이지의 데이터를 변경시켜준다.

 

- 위에서 말했듯이 먼저 const xhr = new XMLHttpRequest();로 객체는 생성해 준다.

- 그 다음 xhr.open(전달방식, URL 주소, 비동기 여부); 로 클라이언트와 서버가 데이터를 주고 받기 위한 통로를 만들어준다.

- GET 방식이라면 URL 주소 뒤에 우리가 중복체크를 하기 위해 작성한 태그 객체의 value를 같이 넘겨주고 POST 방식이라면 인코딩을 해준다.

- 그 다음 작성된 요청을 서버에 보내주는 xhr.send()를 해준다.

- GET 방식이라면 상관없지만 POST 방식이면 GET 방식에서 주소 뒤에 값을 보내준 것처럼 send() 매개변수로 데이터를 넘겨준다.

 

- xhr 객체로 요청을 보내고 그 응답을 받기 위해 xhr이 할 행동들을 미리 정해줘야 한다.

- 그것이 xhr.onreadystatechange = 익명함수() {} 이다. 이것은 xhr 객체의 상태가 변화할 때 즉, open, send, 성공, 실패 등등 상태가 어떤 상태이든 변화할 때 실행되는 함수이다.

- 그 안에서 두개의 상태를 검사하는 데 첫 번째로는 xhr.readyState(준비된 상태)가 XMLHttpRequest.DONE(통신이 완료했을 때)인지 검사 하는 것이다.

- 여기서 완료했다는 것은 오류나 페이지를 못 찾거나 응답이 와서 성공을 했거나를 다 포함한다.

 

- 통신이 완료된 상태를 검사한 뒤에 그 객체들 중에서 xhr.status(상태)가 200(응답된 데이터가 있다)인지를 검사를 한다.

- 200은 응답 코드를 의미하는데 200은 성공이고 404는 페이지를 못 찾는 것이고 500은 오류를 뜻한다.

- 통신이 완료되고 응답까지 완료된 객체를 검사해 변수를 하나 선언해 응답된 문자열을 받아오면 된다.

- let txt = xhr.responseText; 을 통해 응답된 데이터를 받아오고, 다양한 형태로 오기 때문에 txt = txt.trim(); 으로 양쪽 공백을 다 없애주고 응답에 따라 나눠서 HTML에서 id가 result인 <span> 태그의 innerHTML(내용)을 맞게 바꿔준다.

- XMLHttpRequest 객체의 요청을 처리해주는 페이지이다.

- Ajax를 이용해 요청에서 보낸 userid를 받아서 sql을 이용해 중복된 id가 있는지 검사한다.

- 결과에 맞게 out.print()로 응답을 하게 된다.

- 위에서 말했듯이 이 응답을 xhr.responseText(); 이용해서 받아 거기에 맞게 DOM을 이용해 페이지의 내용을 바꿔주는 것이다.

6. 정리

const xhr = new XMLHttpRequest();
		
		xhr.open("GET","checkId_db.jsp?userid=",+userid.value,true);
		
		xhr.onreadystatechange = function() {
			if(xhr.readyState == XMLHttpRequest.DONE) {
				if(xhr.status == 200) {
					let txt = xhr.responseText;
					txt = txt.trim();
					
					if(txt == "O") {
						result.innerHTML = "사용할 수 있는 아이디입니다!";
					} else {
						result.innerHTML = "이미 존재하는 아이디입니다.";
					}
				}
			}
		}
		
		xhr.send();

- Ajax를 이용하기 위한 흐름

① Ajax를 이용하기 위해 XMLHttpRequest 객체 생성

② 전송방식(GET, POST)에 맞게 xhr.open()를 이용해 통로 생성

③ xhr.onreadystatechange = 익명함수() {} 를 이용해 xhr 객체가 미리 정할 행동을 정해줌

④ 함수 안에서 xhr.readyState가 XMLHttpRequest.DONE(4) 인 것을 검사

⑤ 그 안에서 xhr.statue가 200 인 것을 검사

⑥ 이제 xhr.responseText를 이용해 응답된 문자열 받아옴

⑦ 응답에 따라 DOM을 이용해 페이지의 내용을 바꿔줌

⑧ xhr.send()를 통해 요청을 보냄