[Ajax_Js]_기본정리

AJAX : Asynchronous JavaScript And XML

-서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것
- 대표적으로 JSON, XML, HTML 과 같은 다양한 포맷을 주고받을 수 있다.

-Ajax의 강력한 특징은 페이지 전체를 리프레시 하지 않고 기능을 수행하는 비동기성 이다.
- 서버로부터 데이터를 받고 작업을 수행한다.

1] HTTP Request

JavaScript를 이용하여 서버로보내는 HTTP Request를 만들기 위해서는
객체의 인스턴스가 필요하다. XMLHttpRequest가 그러한 Object의 예입니다.

서버에 무엇인가를 요청하기에 앞서, 서버로 보낸 요청에 대한 응답을 정해야 합니다.
httpRequest의 onreadystatechange property 에 특정 함수(nameOfTheFunction) 를 할당하면
요청에 대한 상태가 변화할 때 특정 함수 (nameOfTheFunction)가 불리게 된다.

httpRequest.onreadystatechange = nameOfTheFunction;

이 코드는 해당 함수를 수행하는 것이 아니라 단순하게 어떤 함수가 불릴 것인지만 지정한 것이다
반대로 함수만 연결하면 되기 때문에 임의 함수를 적는 방법도 사용 가능하다.

httpRequest.onreadystatechange = function(){ 

//응답에 따른 로직
}
위와 같이 서버로부터 응답을 받은 후 동작을 결정한 뒤에 요청을 한다.

HTTP request객체의 open() 과 send() 를 이용하면 된다.

httpRequest.open('GET', 'filepath',true/false);
httpRequest.send(null);

open() 메소드의 파라미터

첫번째 파라미터 : HTTP의 요구방식 : GET, POST, HEAD 중의 하나. 혹은 서버에서 지원하는 다른 방식

- 특징 : HTTP 표준에 따라 모두 대문자로 작성해야한다. ex) Firefox 와 같은 특정 브라우저는 오류를 방생할수도 있다.

-GET : Request-URL 에 의해 식별되는 정보를 검색하는 것을 의미합니다. 요청 메시지에 If-Modified-Since, If-Unmodified-Since, If-Match, If-None-Match 또는 If-Range 헤더 필드가 포함된 경우 GET 메서드의 의미는 "조건부 GET"으로 변경됩니다.

- 기본적으로 Database에 대한 질의어 데이터와 같은 요청을 위한 정보를 전송할 때 사용한다.
- Get 방식을 보낼때는 같이 딸려가는 글자수에 제한한다.(255자)
- Get 방식을 사용하면 이를 초과하는 데이터는 절단하여 전송한다.
- GET 방식을 사용하면 데이터가 주소 입력란에 표시되므로 최소한의 보안도 유지되지 않는다.
- GET 방식은 정보를 URL의 끝에 질의 문자열로서 서버로 보낸다.
- 데이터를 쿼리 스트링(Query String)의 일부로써 전달한다.
- 일반적인 HTTP 호출은 모두 GET 방식으로 이루어진다.
- 변수를 넘기지 않는 일반 호출도 GET 방식이다.
- 사용이 간편하다는 장점이 있다.

- POST: 데이터를 메시지 바디에 포함하여 입출력 스트림을 통해 처리하는 방식으로 GET 메소드와는 달리 데이터의 크기에 제한이 없다.

- GET 과 같이 데이터를 인코딩하지만 인코딩한 데이터를 스트림으로 보낸다.
- 서버에 값을 넘기기 위해 만들어진 방식
- 서버측에서의 정보 갱신 작업을 원할 떄 사용
- POST방식이 GET 방식에 비해 많은 양의 데이터를 전송 할 수 있다.
- 클라이언트로부터의 데이터가 HTTP 헤더에 포함되어 전송된다.
- 내부의 구분자가 각 파라미터를 구분
- 클라이언트측에서 데이터를 인코딩 -> 서버측에서 디코딩 클라이언트와 서버간에 상호 정의 되어있는 형식대로 인코    딩을 한 다음 서버로 전송한다.

-HEAD
-헤더 정보만 서버에 요구하는 방법, 기능상 GET과는 동일하나 서버가 응답의 데이터부분에 아무것도 보내지 않는다는 점이 다르다.
-클라이언트가 서버의 정보를 찾고 싶으나 문서 자체를 받을 필요가 없을 때에 사용

두번째 파라미터 : 파라미터는 요구하고자 하는 URL
확한 도메인 네임을 사용하지 않으면 open 메소드 호출 시 permission denied 에러가 발생할 수 있다.

세번째 파라미터 : 요구가 비동기식으로 수행될 지를 결정한다
true(기본값) 일 경우 자바스크립트 함수가 지속적으로 수행 될 수 있어 서버로부터 응답을 받기 전에도 유저와 페이지의 상호작용이 계속 진행된다.
false 일 경우 동기적으로 작동한다. send() 함수에서 서버로부터 응답이 올 때까지 기다립니다.

send() 메소드의 파라미터는 POST 방식으로 요구한 경우 서버로 보내고 싶은 어떠한 데이터라도 가능하다
. 데이터는 서버에서 쉽게 parse 할 수 있는 형식이여야 한다.


2단계 서버 응답에 대한 처리]

위의 httpRequest.onreadystatechange = nameOfTheFunction;
이 함수는 요구의 상태값을 검사할 필요가 있다.

상태값이 XMLHttpRequest.DONE 라면, 서버로부터 모든 응답을 받았으며 이를 처리할 준비가 되었다는 것을 뜻합니다.

if(httpRequest.readyState === XMLHttpRequest.DONE){
//이상없음
}else {
// 준비되지 않음
}

readystate가 가질 수 있는 모든 값의 목록은

0 uninitialized : request가 초기화되지 않음
1 loading : 서버와의 연결이 성사
2 loaded  서버가 request를 받음
3 interactive : request을 처리하는 중
4 complete : request에 대한 처리가 끝났으며 응답할 준비가 완료됨

그 다음에는 HTTP 응답 상태 코드를 검사해야 한다.


100 : 클라이언트는 요청을 계속해야 합니다(SHOULD). 이 중간 응답은 요청의 초기 부분이 수신되었으며 아직 서버에서 거부되지 않았음을 클라이언트에 알리는 데 사용됩니다.

200 : 요청이 성공했습니다. 응답과 함께 반환되는 정보는 요청에 사용된 방법에 따라 다릅니다.
GET 요청된 리소스에 해당하는 엔터티가 응답으로 전송됩니다. HEAD 요청된 리소스에 해당하는 엔티티 헤더 필드는 메시지 본문 없이 응답으로 전송됩니다.

 

더많은 내용은 링크에 있습니다.
https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

HTTP/1.1: Status Code Definitions

 

이제 요구와 그에 대한 응답에 대한 상태 코드를 검사했으므로, 서버에서 받은 데이터를 통해 원하는 작업을 수행할 수 있습니다.

응답 데이터에 접근하기 위한 옵션이 2가지가 있습니다.

1. http_request.responseText - 서버의 응답을 텍스트 문자열로 반환할 것이다.
2. http_request.responseXML - 서버의 응답을 XMLDocument 객체로 반환하며 이는 DOM 을 이용해서 다룰 수 있다.

위는 비동기식 요구입니다 즉 open() 메소드가 false일 떄 사용한다

open()에서 default 인 true일 경우에는 nameOfTheFunction 을 명시할 필요 없이
send() 호출에 의해 반환되는 data를 바로 사용 할 수 있다. 하지만 이는  스크립트가 send를 호출할 때 멈춰지며
서버의 응답이 완료 될 때까지 기다리기 때문에 나쁜 UX를 제공합니다.

 

예제]

xml 파일]

실행화면]

 

* 404 not found 오류

 

- 이유 : Spring의 경우 servlet이 돌아가는 부분 (동적 - jsp를 모아두는 부분) 과 static (정적인 html, xml 등)을 모아두는곳이 다르다

정적인 xml 파일을 경로지정할 것이기 떄문에 prefix와 suffix로 설정한 부분으로 인해 별다른 경로지정없이 jsp 파일명만 넣어서 찾는 servlet 구조가 jsp가 있는 경로에 xml을 만들고 경로를 찾아봤자 인식하지 못한다.

왜냐하면 클라이언트는 jsp가 있는 WEB-INF가 없기 때문이다. 따라서 assets 안의 별도에 파일에 생성하고 이를 찾아가도록 하면 오류는 해결된다