[JavaScript] AJAX

 

1. AJAX란?

- AJAX(Asynchronous JavaScript And XML) 비동기 자바스크립트와 XML의 약자이다.

- 그러나 사실 XML보다 주로 JSON을 많이 사용한다.

- 비동기적으로 자바스크립트를 이용하여 서버와 통신하는 기술을 말한다.

​

- 자바스크립트를 이용하여 내부적으로 통신할 수 있는 방법으로, 사용자가 나중에 필요할 때 서버에서 가져갈 수 있도록 하는 것인데, 이는 곧 서버 입장에서 부담이 줄어든다.

​

​

---

2. 서버와 클라이언트

​

- 클라이언트는 서비스/정보의 소비자. 즉, 사용자라고 생각하면 된다.

- 서버는 서비스/정보의 제공자라고 생각하면 된다.

- 이와 같이 클라이언트에서 서버에 어떤 정보를 요청했을 경우, 서버에서는 그 요청한 정보를 응답해준다.

(여기서 말하는 정보는 js 파일, 데이터베이스, html 문서 등 다양한 것들이 될 수 있다.)

​

- AJAX와 이 개념의 관계: 만약 한 웹사이트가 ajax를 사용하지 않았다고 가정하자. 그렇다면 사용자가 그 웹 사이트에 접속할 경우 서버는 사용자에게 주어야 할 모든 정보들을 한 번에 주어야 할 것이다. 이는 사용자가 적다면 괜찮겠지만, 동접자가 많아진다면 그 말은 웹 사이트에 접속하는 사람 모두에게 모든 정보를 한 번에 서버는 주어야 하는 것이다. 이는 서버에 굉장한 무리를 줄 테고, 그만큼 그 웹 사이트는 느려질 것이다. 이때, 모든 정보를 주지 않고 다른 정보들은 사용자가 요청을 할 경우에 서버에서 가져갈 수 있도록 한다면, 서버 입장에서는 부담이 크게 줄을 것이다. 이를 가능하게 하는 것이 AJAX인 것이다.

---

3. fetch API

​

ex) 사용법

​

- 첫 코드부터 설명하자면, input 태그를 통하여 버튼을 만들었고, onclick 이란 이벤트를 만든 뒤, 그 안에 함수들을 넣은 것이다.

- fetch()는 우선, 첫 번째 인자로 들어간 값을 서버로 요청한다. 따라서 위 코드처럼, fetch('css')의 코드는 css라는 파일을 서버에 요청한 것이다.

​

- then()은 앞의 fetch()에서 서버로 요청한 것에서 응답이 완료된다면, then() 안의 인자로 들어간 함수를 호출해 달라는 코드이다.

​

- then() 안에 들어간 function(text) 와 같은 형태의 함수를 익명 함수라 부르며, 이렇게 파라미터 값으로 들어간 함수를 "콜백 함수"라고 부른다.

​

- 그 안의 내용도 같다. function(response) 안에 들어가 있는 내용을 보면, response.text()가 나오는데, 이는 fetch('css')에서 가져온 내용에서 text 부분이 제대로 응답받아왔다면, then() 코드가 실행된다. 그 안의 내용으로는 querySelector() 메서드를 이용해 위 html 내용의 'article'에 접근하여 HTML 내용을 응답받아온 text로 바꾸어준 것이다.

​

---

4. XMLHttpRequest

- XMLHttpRequest라는 이름만 봐서는, XML만 받아올 수 있을 것 같아 보이지만, 모든 종류의 데이터를 받아오는데 사용 가능하다.

ex) 사용법

XMLHttpRequest 사용법 예시

- 우선 querySelector()로 input(button)을 가져왔다. 그리고 addEventListener을 통하여 'click' 했을 경우, 익명 함수를 호출하였다.

- XMLHttpRequest()는 생성자이다. 그러므로 다른 메서드 호출 이전에 호출되어야 한다. 그리고 이를 xhr이라는 변수에 담았다.

​

- xhr.open('GET', './time.php');의 내용에서, 우선 첫 번째 인자로 들어간 'GET'은 서버와 GET 방식으로 통신할 것이라는 말이다. 두 번째 인자는, 첫 번째 인자로 선택한 방식으로 통신할 파일명이다. 즉, 다시 말하면, time.php라는 파일과 GET 방식으로 통신하겠다는 말이다.

​

- 그 후, xhr.onreadystatechange라는 것이 나온다.

이를 알기 위해선, XMLHttpRequest가 제공하는 readyState라는 프로퍼티를 먼저 알아야 한다.

​

- 서버와 클라이언트가 통신할 때, readyState 프로퍼티는 XMLHttpRequest의 상태를 표시할 때 사용한다.

값	의미	설명
0	uninitialized	객체만 생성되고 아직 초기화되지 않음.(open 메 서드 호출 x)
1	loading	open() 메서드가 호출되고 아직 send() 메서드가 불리지 않음.
2	loaded	send()는 불렸지만 status와 헤더는 도착하지 않음.
3	interactive	데이터의 일부를 받은 상태.
4	completed	데이터를 전부 받은 상태. 완전한 데이터의 이용 가능.

​

- 여기서 readyState === 4이므로, 클라이언트가 서버에서 데이터를 전부 받은 상태이고 완전한 데이터의 이용이 가능할 경우라는 것이다.

​

- 그렇다면 status란 무엇일까?

​

- 이는 HTTP 상태 코드이다. 서버로부터의 응답 상태를 의미한다.

값	텍스트	설명
200	성공(OK)	요청 성공
302	임시 이동	현재 서버가 다른 위치의 페이지로 요청에 응답하고 있지만 요청자는 향후 요청 시 원래 위치를 계속 사용해야 함.
403	금지됨(Forbidden)	접근 거부
404	찾을 수 없음(Not Found)	페이지 없음
500	내부 서버 오류(Internal Server Error)	서버 오류 발생

- 여기서 status ===200이므로, 요청에 성공했을 경우라는 것이다.

​

- 따라서, if(xhr.readyState===4 && xhr.status===200)이라는 것은, XMLHttpRequest 상태가 4번으로 완전한 데이터의 이용이 가능하며, 서버 응답 상태가 200번으로 요청 성공일 경우 밑의 내용을 실행한다는 뜻이다.

​

- 이후, querySelector()을 사용하여 'time'이라는 아이디를 가지고 있는 것의 HTML을 응답받은 텍스트(xhr.responseText)로 바꾸겠다는 것이다.

​

- xhr.send()는 호출 시 xhr.open() 안의 첫 번째 인자에 들어가 있는 방식으로 통신을 시작하겠다는 의미이다.

​

- 서버와 통신하는 과정에서, 각각의 여러 단계들이 내부적으로 존재한다. 그 단계마다 onreadystatechange가 호출된다는 것이다.

ex) http 헤더를 전송받았다, 응답 본문을 전송받는 중이다 등

 

- 그러나 대부분의 경우에는 통신이 끝났다고 하는 것이 가장 중요하기에, 통신이 끝났을 경우에만 구현하는 경우가 가장 많다.

​

---

5. XHMHttpRequest의 Post 방식 사용

​

- xhr.setRequestHeader("Content-Type", "application/x-www-form-unlencorded");

를 추가해준다.